我在项目中使用jQuery，并且需要实现自动完成，但我想避免包含jQuery UI小部件，希望能够使用一些特定的外部插件。 您能提供一些示例/链接吗？ 我需要查询返回键值对的远程JSON源。
不需要jQuery UI的自动完成功能
24
- Jumpa
2
3你可以随时包含仅需要的jQueryUI部分。 - Andrew Whitaker
对其他解决方案不满意，所以我写了自己的。https://gist.github.com/d3ep4k/1816f47fb9949d565bde11ee9b18cc61 - Sorter
8个回答
24
你可以在输入文本框中使用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>
- Cheezy Code
13
这里是完整文档
代码
脚本
<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
- Rohan Kumar
7
以下是我编写的一个小型自动完成插件，请试用：https://github.com/Fischer-L/autoComplt
因为我没有使用jQuery，也不想为了一个功能而包含一些大型库，所以我为自己编写了这个插件。
此插件不依赖其他库，也不需要包含其他CSS，只需包含一个JS脚本即可。
附言：如果您使用它并发现需要改进的地方，请告诉我：）
- Fischer
3
1不要以为你打算实现Ajax，你可以让我摆脱jquery :) - Alec Teal
@Fischer 是的！请增强从 AJAX 调用中获取列表的功能。你所做的很棒，因为它看起来不会修改输入周围的 DOM。我一直在尝试找到类似于这样的东西，以在不破坏布局的情况下在不同的 UI 框架中使用。虽然我也需要触发服务器端搜索，但是这是一个很好的开始！ - Josh Russo
@AlecTeal 如果你仍然对此感兴趣，该控件实际上支持AJAX https://gist.github.com/rupe120/bc520aaac48608b0c3d825d13dda6deb - Josh Russo
2
我已经开始用纯JavaScript编写自动完成/提及插件。它还没有完成，但这可能是一个很好的起点。
- Reyraa
2
1它正在工作。除了编码风格，还有什么问题吗？ - Gordian
是的，它能够工作但缺乏多实例能力。虽然易于实现，但我没有足够的时间来更改它。 - Reyraa
0
<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',
]
});
}
- user6407136
0
这是我见过的最好的多类别/功能自动完成插件，它包含许多功能，并提供了完全控制40个参数以根据您的需求进行自定义。它非常动态，并提供具有RTL或LTR语言的自动检测的多语言输入。
它不使用JQuery，代码非常轻巧且干净。
演示页面：http://www.muwakaba.com/plugins/autocomplete
您可以在演示页面上使用不同的配置，查看所有参数和功能。
祝你好运！
- moderns
0
无需包含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)">
或者你可以直接提供静态内容：
<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)">
- Neeraj Dhekale
-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
});
});
在这里试试 代码
- S. S. Rawat
3
1你应该添加代码。否则，如果链接失效，这将毫无意义。 - Deep Sharma
6@Subhash OP不想使用
jQuery UI，而你正在使用jQuery UI自动完成小部件。 - Rohan Kumar1在你的回答中，你还使用了@RohanKumar。 - S. S. Rawat
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接