jquery ui autocomplete自动提示控件使用示例

来源：互联网发布：护卫神php套件论坛编辑：程序博客网时间：2024/06/05 01:53

所需js库与css包，于jquery ui 官网下载

js：

$(function(){var saveStatus = false;$("#workDept_add" ).autocomplete({autoFouces : true,source: function( request, response ) {var dataParams = "<?xml version=\"1.0\" encoding=\"utf-8\"?><dataParams><deptName>"+request.term.replace(/(^\s*)|(\s*$)/g,'')+"</deptName><typeId>0,1</typeId></dataParams>";$.ajax({url: "findOwnerWithFuzzySearch.action?random="+Math.random(),dataType: "json",data: {"type" : 'post',"token" : "8a818e943bd71914013c22210b3d0c27","method" : "getMatchedDepts","dataType" : "json","dataParams":dataParams},success: function( data ) {response( $.map( data.params, function( item,index ) {return {label: item.description,value: item.id}}));}});},minLength: 1,search: function() {$("#workDeptId_add").val("");saveStatus = false;},select: function( event, ui ) {$("#workDeptId_add").val(ui.item.value);$("#workDept_add").val(ui.item.label);saveStatus = true;return false;},open: function() {$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );},close: function() {$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );},focus: function( event, ui ) {$("#workDeptId_add").val("");return false;},change : function(){if(!saveStatus){$("#workDeptId_add").val("");}}});});

上例中：request.term 为 text框中输入的内容，即提交至后台的查询条件

页面：

  <input type="text" id="workDept_add" style="width: 300px;" />

效果：