一、首先了解下autocomplete 提供的重要属性:
1. autoFocus:当智能提示框出现时,是否自动选中第一项,默认为false,即不选中。 2. delay:在按键后执行搜索的延时,默认为300ms。 3. disabled:是否禁用自动完成功能,默认为false。 4. minLength:触发自动完成功能需要输入的最小字符数量。 5. source:即为指定智能提示下拉框中的数据来源,支持三种类型。 Array,主要用于本地化数据提供,支持两种格式:字符串数 组 [ "Choice1", "Choice2" ]及标签和值属性的Json格式数 组 [ { label: "Choice1", value: "value1" }, ... ] String,用于ajax请求的远程地址链接,返回Array或Json格式字符串。 Function,回调函数,最具有灵活性的一种方式,可用于返回任何数据源方式来实现自动完成,其中包含两个参数request,response通过request.term 来获取用户输入的值,通过response(argument)来对获取的数据源进行显示。二、JQuery UI还提供了一些有用的方法: 1. close():关闭智能提示选择框。 2. destroy():销毁智能提示选择框,将其所产生的元素完全删除,使其恢复至初始状态。 3. disable():禁用自动完成功能。 4. enable():开启自动完成功能。三、主要事件包括: 1. change(event, ui):当值改变时发生,ui.item为选中的项。 2. close(event, ui):当智能提示框关闭时发生。 3. create(event, ui):当智能提示框创建时发生,可以在此事件中,对外观进行一些控制。 4. focus(event, ui):当智能提示列表任意一项获得焦点时发生,ui.item为获得焦点的项。 5. open(event, ui):当智能提示框打开或更新时发生。 6. response(event,ui):在搜索完成后智能提示框显示前发生,可以在此事件中对显示项进行处理。 7. search(event, ui): 在开始请求之前发生,可以在此事件中返回false来取消请求。 8. select(event, ui):当智能提示框中任意一项被选中时发生,ui.item为选中的项。常用有ui.item.id,ui.item.value和ui.item.label一般显示事例比较简单,这里提供一个返回二维数组 的 php版:
$(document).ready(function(){
/**/ var auserUrl = web_url ; var sKey = $('#suid').val(); $('#suid').autocomplete({ source:function(request, response){ // $.getJSON(auserUrl, request, function(data, status, xhr){ $.ajax({ url:auserUrl, type:'POST', dateType:'json', data:{'sKey':request.term}, success:function(data, textStatus,jqSHR){ data = eval("("+data+")");//通过map函数重新生成规定结构数组并返回
response($.map(data, function(item, index){ // return item.aname; return { label: item.aname, value: item.aname, id:item.id } } )); } }) }, select: function( event, ui ) { // 获取选中项对应的id $('#h_suid').val(ui.item.id); //console.log(ui.item.id); } });}