让html自动具有ajax,支持ajax的jquery自动完成插件

这是一款轻量级的jquery自动完成插件。该jquery自动完成插件支持ajax。用户在输入框中输入内容时，插件会自动搜索指定的数组对象，或json对象，完成自动补全。

使用方法

在页面中引入jquery，void_autocomplete.js和样式文件void_autocomplete.css。

基本使用方法

该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 autocomplete

function 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);