这是一款轻量级的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 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);
advanced-autocomplete.jquery自动完成插件的github地址为:https://github.com/alotropico/advanced-autocomplete.jquery
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!