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;
}
728x90
728x90
'Javascript > JQuery' 카테고리의 다른 글
| mouseenter 과 mouseover 차이 (0) | 2021.03.04 |
|---|---|
| 개체가 'getClientRects' 속성이나 메서드를 지원하지 않습니다. (2) | 2021.01.25 |
| jQuery 제이쿼리 플러그인 - jquery UI Library, jquery bxSilder, jquery-cookie (0) | 2020.04.24 |
| jQuery 비동기 방식 연동 (0) | 2020.04.23 |
| jQuery 다양한 효과와 애니메이션 (0) | 2020.04.22 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
