jQuery UI 없이 자동 완성
프로젝트에서 jQuery를 사용하고 있는데 자동 완성을 구현해야 하는데 jQuery UI 위젯이 포함되는 것을 피하고 싶고, 특정 외부 플러그인을 사용했으면 좋겠습니다.몇 가지 예시/링크를 제시해주시겠습니까?키 값 커플을 반환하는 원격 JSON 소스를 쿼리해야 합니다.
입력 텍스트 상자에 HTML5 'list' 속성을 사용하고 datlist를 사용하여 사용자 정의 값 목록을 제공할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<!--your stuff-->
</head>
<body>
<!--your stuff-->
<input type="text" id="txtAutoComplete" list="languageList"/><!--your input textbox-->
<datalist id="languageList">
<option value="HTML" />
<option value="CSS" />
<option value="JavaScript" />
<option value="SQL" />
<option value="PHP" />
<option value="jQuery" />
<option value="Bootstrap" />
<option value="Angular" />
<option value="ASP.NET" />
<option value="XML" />
</datalist>
</body>
</html>
이해하지 못하셨다면 http://www.cheezycode.com/2015/09/create-auto-complete-dropdown-using.html 에서 자세히 읽어 보십시오.
영상도 있고요. JQuery 없이 자동 완성
jQuery 플러그인에 대해 Ajax Autocomplete를 사용할 수 있습니다.
그리고 여기 전체 문서가 있습니다.
코드
대본
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.min.js"></script>
<script>
a1 = $('#query').autocomplete({
width: 448,
delimiter: /(,|;)\s*/,
lookup: 'Andorra,Azerbaijan,Bahamas,Bahrain,Benin,Bhutan,Bolivia,Bosnia Herzegovina,Botswana,Brazil,Brunei,Bulgaria,Burkina, Burundi,Cambodia,Cameroon,Canada,Cape Verde,Central African Rep,Chile,China,Colombia,Comoros,Congo,Congo {Democratic Rep},Costa Rica,Croatia,Cuba,Cyprus,Czech Republic,Denmark,Djibouti,East Timor,Ecuador,Egypt,El Salvador,Equatorial Guinea,Eritrea,Fiji,France,Georgia,Germany,Ghana,Greece,Grenada,Guatemala,Guinea,Guinea-Bissau,Guyana,Haiti,Honduras,Hungary,India,Iraq,Ireland {Republic},Ivory Coast,Jamaica,Japan,Kazakhstan,Kiribati,Korea North,'.split(',')
});
</script>
CSS
.text-field {
-moz-box-sizing: border-box;
border: 1px solid #EEEEEE;
font-family: "Source Sans Pro",Arial,sans-serif;
font-size: 0.73684em;
font-weight: 600;
height: 37px;
margin: 0;
padding: 5px;
width: 100%;
}
.autocomplete-suggestion {
overflow: hidden;
padding: 2px 5px;
white-space: nowrap;
}
.autocomplete-suggestions strong {
color: #3399FF;
font-weight: normal;
}
.autocomplete-selected{
background:#F0F0F0;
}
HTML
<input type="text" id="query" class="text-field valid" autocomplete="off" placeholder="Search here">
저는 데모를 만들었습니다.autocomplete여기 jsbin.com 링크입니다.
여기 제가 쓴 작은 자동완성 플러그인이 있습니다. 시도해 보세요: https://github.com/Fischer-L/autoComplt
저는 jQuery를 사용하지 않고 단지 하나의 기능에만 큰 립을 포함하고 싶지 않기 때문에 직접 글을 씁니다.
이 플러그인은 다른 립에 의존하지 않고 다른 CSS를 포함할 필요가 없기 때문에 JS 스크립트를 하나 포함하는 것만으로도 충분합니다.
p.s 사용하시다가 개선되어야 할 부분이 있으면 말씀해주세요 :)
저는 평이한 자바스크립트로 자동 완성/언급 플러그인을 작성하기 시작했습니다.아직 완성하지는 못했지만, 좋은 출발점이 될 수도 있습니다.
JQuery나 다른 타사 라이브러리를 포함할 필요가 없습니다.
IP_autoComplete함수는 필드 값을 URL(1번째 파라미터)에 자동으로 연결합니다.예를 들어 텍스트 상자에 값이 있습니다.neeraj그리고나서arrjson.php?Name=neeraj트리거됩니다.
정적 값에 대해서도 IP_autocomplete 기능을 사용할 수 있습니다.문자열을 시작할 때 # 기호를 한 번만 추가하면 됩니다(compass preated).예: "#val1,val2,val3"
arrjson.php는 json 인코딩된 문자열을 반환해야 합니다.
HTML:
<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js">
몸
<input type="text" name="testautocomplete" id="testautocomplete" onkeypress="IP_autoComplete('arrjson.php?Name=',this.id,event)">
또는 단순히 정적을 제공할 수도 있습니다.
<input type="text" name="testneeraj" id="testneeraj" onkeyup="IP_autoComplete('#sachin bhalake,ishwar agam,mohsin khan,neeraj dhekale,sheetal dhekale,ajay bhalake',this.id,event)">
이것은 내가 본 것 중 최고의 멀티 카테고리/기능 자동완성 플러그인으로, 이것은 많은 기능을 포함하고 있으며 40개의 파라미터를 완벽하게 제어하여 원하는 대로 사용자 지정할 수 있습니다.매우 역동적이며 RTL 또는 LTR 언어에 대한 자동 감지 기능이 있는 다중 언어 입력을 제공합니다.
JQuery를 사용하지 않고 코드가 매우 가볍고 깨끗합니다.
데모 페이지: http://www.muwakaba.com/plugins/autocomplete
데모 페이지에서 다양한 구성으로 사용할 수 있으며 모든 파라미터와 기능을 볼 수 있습니다.
행운을 빕니다.
<script src="https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.css"/>
입력 내용입니다.
<input type="search" id="place-search-input" placeholder="Start Searching..."/>
자바스크립트:
<script type="text/javascript">
var ps;
window.onload = function () {
ps = placeSearch({
key: 'lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24',
container: document.querySelector('#place-search-input'),
useDeviceLocation: false,
collection: [
'poi',
'airport',
'address',
'adminArea',
]
});
}
이것을 시도해 보세요, 이것이 당신에게 도움이 될 것입니다.
HTML
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
JS
$(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
});
});
피들
언급URL : https://stackoverflow.com/questions/19157249/autocomplete-without-jquery-ui
'programing' 카테고리의 다른 글
| MariaDB MySQL 최적화 (0) | 2023.09.07 |
|---|---|
| 도커 파일에서 변수를 정의하는 방법은? (0) | 2023.09.07 |
| 에 깃 커밋 해시를 포함합니다.NET dll (0) | 2023.09.07 |
| Angular2 QuickStart npm 시작이 올바르게 작동하지 않음 (0) | 2023.09.07 |
| 콘솔에서 변수를 추적할 때 새 줄을 만드는 방법은? (0) | 2023.09.07 |