私は自分のプロジェクトで jQuery を使用しており、オートコンプリートを実装する必要がありますが、jQuery UI ウィジェットを含めることは避け、特定の外部プラグインを使用したいと考えています。いくつかの例/リンクを教えてください。キーと値のペアを返すリモート JSON ソースにクエリを実行する必要があります。
8 に答える
Ajax Autocomplete for jQuery プラグインを使用できます
そして、ここに完全なドキュメントがあります
コード
脚本
<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 を使用しておらず、1 つの機能のためだけにいくつかの大きなライブラリを含めたくないので、自分で書いています。
このプラグインは他のライブラリに依存せず、他の CSS を含める必要がないため、JS スクリプトを 1 つ含めるだけで十分です。
PSあなたがそれを使用して改善する必要があることを見つけたら、私に教えてください:)
プレーンな Javascript でオートコンプリート / メンション プラグインを書き始めました。まだ完成していませんが、良い出発点になるかもしれません。
JQuery やその他のサードパーティ ライブラリを含める必要はありません。
IP_autoComplete
関数は、フィールド値を URL (第 1 パラメーター) に自動的に連結します。たとえば、テキストボックスに値がある場合neeraj
、arrjson.php?Name=neeraj
トリガーされます。
静的値にも IP_autocomplete 関数を使用できます。文字列の先頭に # 記号を 1 回追加するだけです (コンマ区切り)。例: 「#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)">
または、単純に static を与えることができます:
<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)">
これを試してください、これはあなたを助けるでしょう
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
});
});
フィドルhere