Question

我在我的项目中使用jQuery并且我需要实现自动完成，但我想避免包含jQuery UI小部件，并希望使用一些特定的外部插件。你能提供一些例子/链接吗？我必须查询返回键值对的远程JSON源。

Answer 1

您可以使用HTML5＆＃39; list＆＃39;输入文本框中的属性，并使用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

了解更多信息

还有一段视频 Auto-Complete Without JQuery

Answer 2

您可以使用Ajax Autocomplete for jQuery plugin

这是full documentation

<强>代码

<强> SCRIPT

<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

Answer 3

以下是我编写的一个小型自动完成插件，请尝试：https://github.com/Fischer-L/autoComplt

因为我没有使用jQuery而且不想仅为一个功能包含一些大型库，所以我自己写。

此插件不依赖于其他库，也不必包含其他CSS，因此仅包含一个JS脚本就足够了。

P.S如果你使用它并找到一些需要改进的东西，请告诉我:)

Answer 4

我开始用普通的Javascript编写一个自动完成/提示插件。我还没有完成，但它可能是一个很好的起点。

github

Answer 5

无需包含JQuery或任何其他第三方库。

IP_autoComplete函数会自动将字段值合并到URL（第一个参数）。例如，文本框的值为neeraj，然后会触发arrjson.php?Name=neeraj。

您也可以将IP_autocomplete函数用于静态值。只需在字符串开头添加＃符号一次（逗号拼写）。例如：＆＃34;＃val1，val2，val3＆＃34;

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)">

Answer 6

这是我见过的最好的多类别/功能自动完成插件，它包含许多功能，可让您完全控制40个参数，以便根据需要进行自定义。它非常动态，提供多语言输入，可自动检测RTL或LTR语言。

它不使用JQuery，代码的大小非常轻，所以很干净。

演示页： https://github.com/davetroy/geohash

您可以在演示页面上使用不同的配置，并查看所有参数和功能。

祝你好运！

Answer 7

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

Answer 8

试试这个，这将有助于你

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

自动完成没有jQuery UI

8 个答案: