22

私は自分のプロジェクトで jQuery を使用しており、オートコンプリートを実装する必要がありますが、jQuery UI ウィジェットを含めることは避け、特定の外部プラグインを使用したいと考えています。いくつかの例/リンクを教えてください。キーと値のペアを返すリモート JSON ソースにクエリを実行する必要があります。

4

8 に答える 8

11

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です

于 2013-10-03T10:52:15.100 に答える
7

ここに私が書いた小さなオートコンプリート プラグインがあります。お試しください: https://github.com/Fischer-L/autoComplt

私は jQuery を使用しておらず、1 つの機能のためだけにいくつかの大きなライブラリを含めたくないので、自分で書いています。

このプラグインは他のライブラリに依存せず、他の CSS を含める必要がないため、JS スクリプトを 1 つ含めるだけで十分です。

PSあなたがそれを使用して改善する必要があることを見つけたら、私に教えてください:)

于 2014-01-06T12:45:22.830 に答える
2

プレーンな Javascript でオートコンプリート / メンション プラグインを書き始めました。まだ完成していませんが、良い出発点になるかもしれません。

ギットハブ

于 2014-12-30T11:03:48.927 に答える
0

JQuery やその他のサードパーティ ライブラリを含める必要はありません。

IP_autoComplete関数は、フィールド値を URL (第 1 パラメーター) に自動的に連結します。たとえば、テキストボックスに値がある場合neerajarrjson.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)">

JSFiddle

または、単純に 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)">
于 2015-09-01T13:53:01.653 に答える
-10

これを試してください、これはあなたを助けるでしょう

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

于 2013-10-03T11:37:42.357 に答える