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实时显示模糊搜索列表结果的主要内容,如果未能解决你的问题,请参考以下文章

使用jquery+ajax+php实现搜索框的功能

java如何实现异步模糊查询

ajax+JQuery实现类似百度智能搜索框

jquery+ajax 实现搜索框提示

模糊搜索的实现

用js如何实现模糊查询带下拉菜单?