没有 jQuery UI 的自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19157249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autocomplete Without jQuery UI
提问by Jumpa
I'm using jQuery in my project and I need to implement autocomplete, but I'd like to avoid including jQuery UI widget, and hopefully use some specific external plugin. Could you please provide some examples/link? I have to query a remote JSON source that returns key-value couples.
我在我的项目中使用 jQuery，我需要实现自动完成，但我想避免包含 jQuery UI 小部件，并希望使用一些特定的外部插件。你能提供一些例子/链接吗？我必须查询返回键值对的远程 JSON 源。
采纳答案by Rohan Kumar
You can use the Ajax Autocomplete for jQuery plugin
您可以使用Ajax Autocomplete for jQuery 插件
And here is the full documentation
这是完整的文档
Code
代码
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
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
HTML
<input type="text" id="query" class="text-field valid" autocomplete="off" placeholder="Search here">
I created a demo of autocompletehere is the link jsbin.com
我在autocomplete这里创建了一个演示链接jsbin.com
回答by Cheezy Code
You can use HTML5 'list' attribute in your input textbox and provide it a custom list of values by using datalist.
您可以在输入文本框中使用 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>
If you didn't get it, Read more at http://www.cheezycode.com/2015/09/create-auto-complete-dropdown-using.html
如果你没有得到它，阅读更多http://www.cheezycode.com/2015/09/create-auto-complete-dropdown-using.html
There's a video as well for itAuto-Complete Without JQuery
还有一个视频，无需 JQuery 即可自动完成
回答by Fischer
Here is one little autocomplete plugin written by me, please try: https://github.com/Fischer-L/autoComplt
这是我写的一个小自动完成插件，请尝试：https: //github.com/Fischer-L/autoComplt
Because I am not using jQuery and don't want to include some big libs just for one feature, I write for myself.
因为我不使用 jQuery 并且不想只为一个功能包含一些大库，所以我为自己编写。
This plugin doesn't depend on other libs and doesn't have to include other CSS, so just including one JS script is enough.
这个插件不依赖其他库，也不必包含其他CSS，所以只包含一个JS脚本就足够了。
P.S If you use it and find some thing which needs to be improved, please tell me :)
PS如果你使用它并发现一些需要改进的地方，请告诉我:)
回答by Reyraa
回答by Neeraj Dhekale
No need to include JQuery or any other third party library.
无需包含 JQuery 或任何其他第三方库。
IP_autoCompletefunction will automatically concatinate field value to URL (1st parameter). For example textbox has value neerajthen arrjson.php?Name=neerajwill be triggered.
IP_autoComplete函数将自动将字段值连接到 URL（第一个参数）。例如文本框有值neeraj然后arrjson.php?Name=neeraj将被触发。
You can use IP_autocomplete function for static value as well. Just add # sign once at starting in your string (comma sepreated). E.g: "#val1,val2,val3"
您也可以将 IP_autocomplete 函数用于静态值。只需在字符串开头添加 # 符号（逗号分隔）。例如：“#val1,val2,val3”
arrjson.php should return json encoded string.
arrjson.php 应该返回 json 编码的字符串。
HTML:
HTML：
<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js">
Body
身体
<input type="text" name="testautocomplete" id="testautocomplete" onkeypress="IP_autoComplete('arrjson.php?Name=',this.id,event)">
Or simply you can give 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)">
回答by moderns
This the best multi category/feature Autocomplete plugin I have ever seen, it contains many features and gives you full control over 40 parameters to customize it as you wish. It is so dynamic and provides multi languages inputs with auto detection for RTL or LTR languages.
这是我见过的最好的多类别/功能自动完成插件，它包含许多功能，并让您完全控制 40 个参数以根据需要对其进行自定义。它是如此动态，并提供多语言输入和自动检测 RTL 或 LTR 语言。
It doesn't use the JQuery and the code has very light size and so clean.
它不使用 JQuery 并且代码非常轻巧而且非常干净。
The demo page:http://www.muwakaba.com/plugins/autocomplete
演示页面：http : //www.muwakaba.com/plugins/autocomplete
You can use it with different configurations on the demo page and see all the parameters and the features.
您可以在演示页面上以不同的配置使用它，并查看所有参数和功能。
Good luck!
祝你好运！
回答by Ha Viet
<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"/>
Here is input :
这是输入：
<input type="search" id="place-search-input" placeholder="Start Searching..."/>
Javascript :
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',
]
});
}
回答by S. S. Rawat
Try this, this will be help you
试试这个，这会帮助你
HTML
HTML
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
JS
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
});
});
Fiddle here
小提琴 here
