其他代码
支持ajax的jquery自动完成插件
PetitQ
这是一款轻量级的 jquery 自动完成插件。该 jquery 自动完成插件支持 ajax。用户在输入框中输入内容时，插件会自动搜索指定的数组对象，或 json 对象，完成自动补全。
使用方法:
在页面中引入 jquery，void_autocomplete.js 和样式文件 void_autocomplete.css。
也想出现在这里？联系我们吧
<link rel="stylesheet" type="text/css" href="css/void_autocomplete.css">
<script src="path/to/jquery.min.js" type="text/javascript"></script>
<script src="path/to/void_autocomplete.js" type="text/javascript"></script>
基础方法:
该 jquery 自动完成插件最基本的使用方法如下：
//如果你不使用ajax，你需要在数组中放入以组需要自动完成的选项对象var celestial_bodies = [
{title:"Earth", id:"1"},
{title:"Moon", id:"2"},
{title:"Sun", id:"3"}
];
var myAutocomplete = $("input").void_autocomplete({
list: celestial_bodies,
onItemSelect: function(){console.log(item);}
});
通过 ajax 调用：
通过这种方法，当输入框中的内容改变的时候，会产生一个 ajax 调用，并接收用户的输入，通过 json 文件来查找相应的内容。
var ajax_url = "json/list.json";
var myAutocomplete = $("input").void_autocomplete({
ajax: ajax_url,
onItemSelect: autocompleteCallback,
maxResults: 10
});
// This function is called whenever// an option is selected in the autocompletefunction autocompleteCallback(selected){
console.log(selected);
}
配置参数：
该 jquery 自动完成插件的可用配置参数有：
min：产生自动完成的最小字符数。默认值为 1
selections：0 表示允许多个选项，1 表示只允许一个选项。默认为 0
openUp：如果为 true，打开的列表向上，覆盖输入框。否则列表向下。默认为 false
list：一个数组，包含要自动完成的列表对象
caseSensitive：是否大小写敏感。默认为 false
maxResults：列表中显示的最大项目数量。默认为 10 个
sortKey：列表中字符串的排序方式。默认为 false
ajax：是否使用 ajax 调用。默认为 false
onItemSelect：列表中的选项被选择时的回调函数
var myAutocomplete = $("input").void_autocomplete({
min: 1,
selections: 0,
openUp: false,
list: [],
caseSensitive: false,
maxResults: 10,
sortKey: false,
ajax: false,
onItemSelect: function(){}
});
方法：
forceItem：强制插入一个新的列表项，并触发回调函数
recoverItem：取消先前选择的项目并触发回调
var myAutocomplete = $("input").void_autocomplete({
selections: 1,
list: celestial_bodies
});
var pluto = {
title:"Pluto",
id:"11"
};
myAutocomplete.forceItem(pluto);
advanced-autocomplete.jquery 自动完成插件的 github 地址为：https://github.com/alotropico/advanced-autocomplete.jquery
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
