没有 jQuery UI 的自动完成答案

【问题标题】：Autocomplete Without jQuery UI没有 jQuery UI 的自动完成
【发布时间】：2013-10-10 00:52:58
【问题描述】：

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

【问题讨论】：

您可以随时添加only the parts of jQueryUI you need。

标签： javascript jquery ajax autocomplete jquery-autocomplete

【解决方案1】：

您可以在输入文本框中使用 HTML5 'list' 属性，并使用 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

【讨论】：

【解决方案2】：

您可以使用Ajax Autocomplete for jQuery plugin

这里是full documentation

代码

脚本

<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

【讨论】：

【解决方案3】：

这是我写的一个小自动补全插件，请尝试：https://github.com/Fischer-L/autoComplt

因为我没有使用 jQuery，也不想仅仅为了一个特性而包含一些大的库，所以我为自己编写。

这个插件不依赖其他库，也不必包含其他CSS，所以只要包含一个JS脚本就足够了。

P.S 如果你使用它，发现有什么需要改进的地方，请告诉我:)

【讨论】：

别以为你打算实现 Ajax，你可以把我从 jquery 中拯救出来 :)
@Fischer 是的！请增强从 AJAX 调用中获取列表的能力。你所做的很棒，因为它看起来不像修改输入周围的 DOM。我已经 beehttp://stackoverflow.com/users/1123047/fischern 试图找到类似的东西在不同的 UI 框架中使用而不会破坏布局。我还需要触发服务器端搜索，不过是一个很好的开始！
@AlecTeal 如果你还对这个感兴趣，该控件确实支持AJAX gist.github.com/rupe120/bc520aaac48608b0c3d825d13dda6deb

【解决方案4】：

我已经开始用纯 Javascript 编写一个自动完成/提及插件。我还没有完成，但这可能是一个很好的起点。

github

【讨论】：

它工作正常。除了编码风格，还有什么问题？
是的。工作但缺乏多重实例化能力。易于实施，但我没有足够的时间来更改它。

【解决方案5】：

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

IP_autoComplete 函数将自动将字段值连接到 URL（第一个参数）。例如文本框的值为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)">

【讨论】：

【解决方案6】：

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

它不使用 JQuery，代码大小很轻，很干净。

演示页面： http://www.muwakaba.com/plugins/autocomplete

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

祝你好运！

【讨论】：

【解决方案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',
        ]
    });
}

【讨论】：

【解决方案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

【讨论】：

你也应该添加代码。否则如果链接死了就没意义了。
@Subhash OP 不想使用 jquery ui 而你正在使用 jquery ui autocomplete widget
在你的回答中，用户界面也使用了@RohanKumar