jquery+ajax 实现text框模糊搜索并可利用listbox实时显示模糊搜索列表结果
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery+ajax 实现text框模糊搜索并可利用listbox实时显示模糊搜索列表结果相关的知识,希望对你有一定的参考价值。
功能描述:
text框中输入,text框下面的listbox中实时显示依据输入的内容进行模糊搜索的结果
js代码
1 $j(function() { 2 $j("input[id=‘txtCos‘]").bind(‘input propertychange‘, function () { searchCostCenterbyName($j(this).val()); }); 3 }); 4 5 function searchCostCenterbyName(parameters) { 6 $j.ajax({ 7 // 调用后台方法方式 8 url: "../../Account/AjaxPage.aspx?method=GetCostCenterContents&corpId="+<%=Corporation%>+"&corpName="+parameters, 9 type: "POST", 10 contentType: "application/json; charset=utf-8", 11 dataType: "json", 12 //解析返回的json数据 13 success: function (dataReturn) { 14 var datar=dataReturn; 15 if (datar.length>0) { 16 $j("#listbCos").empty(); 17 } 18 for(var i=0 ;i<datar.length ;i++) 19 { 20 $j("#listbCos").append("<option value=\"" + datar[i].CosID + "\">" + datar[i].CosName + "</option>"); 21 } 22 }, 23 error: function () { 24 } 25 }); 26 };
页面元素
1 <td width="28%"> 2 <input id="txtCos" type="text" width="100%" /> 3 <select id="listbCos" multiple="Multiple" style="width: 200px; height: 130px;"></select> 4 </td>
以上是关于jquery+ajax 实现text框模糊搜索并可利用listbox实时显示模糊搜索列表结果的主要内容,如果未能解决你的问题,请参考以下文章