web-dev-qa-db-ja.com

jQuery UIなしのオートコンプリート

私のプロジェクトではjQueryを使用していて、オートコンプリートを実装する必要がありますが、jQuery UIウィジェットを含めないようにしたいのですが、うまくいけば、特定の外部プラグインを使用できます。いくつかの例/リンクを提供していただけませんか？キーと値の組み合わせを返すリモートJSONソースをクエリする必要があります。

javascriptjqueryajaxautocompletejquery-autocomplete
20
Jumpa

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

11
Rohan Kumar

入力テキストボックスでHTML5の「リスト」属性を使用し、datalistを使用して値のカスタムリストを提供できます。

<!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なしでオートコンプリート

13
Cheezy Code

これは私が書いたオートコンプリートプラグインの1つです。試してください： https://github.com/Fischer-L/autoComplt

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

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

PSあなたがそれを使って、改善する必要がある何かを見つけたら、教えてください:)

7
Fischer

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

github

2
Reyraa

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

IP_autoComplete関数は、フィールド値を自動的にURLに連結します（最初のパラメーター）。たとえば、textboxの値はneeraj、次にarrjson.php?Name=neerajがトリガーされます。

静的な値にもIP_autocomplete関数を使用できます。文字列の最初に＃記号を追加するだけです（カンマ区切り）。例：「＃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

または単に静的を与えることができます：

<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)">
1
Neeraj Dhekale
<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..."/>

JavaScript：

<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',
        ]
    });
}
0
Ha Viet

これは私が今まで見た中で最高のマルチカテゴリ/機能オートコンプリートプラグインです。多くの機能が含まれており、40のパラメーターを完全に制御して、必要に応じてカスタマイズできます。これは非常に動的で、RTLまたはLTR言語の自動検出を備えた多言語入力を提供します。

JQueryを使用せず、コードは非常に軽量でクリーンです。

デモページ：http://www.muwakaba.com/plugins/autocomplete

デモページでさまざまな構成で使用して、すべてのパラメーターと機能を確認できます。

幸運を！

0
moderns