728x90
728x90

검색 기능 구현 시 텍스트 입력 구역에 텍스트를 넣으면 자동으로 완성된 검색어를 표시해 주는 기능으로 jQuery UI에 있는 기능입니다. 사용 시 html에 아래 css와 js가 연결되어야 합니다.

 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 

사용법은 아래와 같습니다.

 

 $( function() {
 
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    
    $( "#tags" ).autocomplete({
      source: availableTags
    });
    
});
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

 

 

 

 

 

Autocomplete | jQuery UI

Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for progr

jqueryui.com

 

 

 

우선순위 문제로 z-index를 조정할 때

 

/* CSS에 추가 */
.ui-autocomplete {
  z-index:2147483647;
}

 

artisticbit.tistory.com/entry/BootStrapModal-%EC%97%90%EC%84%9C-autocomplete-%EC%95%88%EB%82%98%EC%98%AC%EB%95%8C

728x90
728x90
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,

v