支持ajax的jquery自动完成插件

这是一款轻量级的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

在线预览    源码下载

爱编程-编程爱好者经验分享平台


扫描下方二维码,加入前端微信群,共同交流进步!

文章评论

  

版权所有 爱编程 © Copyright 2012. w2bc.com. All Rights Reserved.
闽ICP备12017094号-3