Jum*_*mpa 19 javascript ajax jquery autocomplete jquery-autocomplete
我在我的项目中使用jQuery,我需要实现自动完成,但我想避免包含jQuery UI小部件,并希望使用一些特定的外部插件.你能提供一些例子/链接吗？我必须查询返回键值对的远程JSON源.
Che*_*ode 14
您可以在输入文本框中使用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
还有一个视频,它 自动完成没有JQuery
Roh*_*mar 11
您可以使用Ajax Autocomplete for jQuery插件
这是完整的文档
码
脚本
<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
小智 7
这是我编写的一个小自动完成插件,请尝试:https://github.com/Fischer-L/autoComplt
因为我没有使用jQuery而且不想仅为一个功能包含一些大型库,所以我自己写.
这个插件不依赖于其他库,也不必包含其他CSS,所以只包含一个JS脚本就足够了.
PS如果你使用它并找到一些需要改进的东西,请告诉我:)
| 归档时间： |
|
| 查看次数： |
24842 次 |
| 最近记录： |