步骤:
1、在文本框中输入内容时,触发keyup事件;
2、在keyup事件的处理方法中,通过Ajax调用控制器的方法;
3、在控制器方法中,搜索满足条件的数据,这里分页获取数据,且只取第一页的数据,返回Json数据;
4、JavaScript处理返回的数据,拼HTML,生成列表框,并为列表框添加鼠标点击事件;
说明:
1、实现了通过上下键和Enter键选择列表项功能;
2、使用jQuery给文本框添加事件,尽量避免直接使用JavaScript,这样就不用考虑浏览器兼容问题了,因为jQuery已经做了。
3、经过测试,支持IE、火狐、谷歌浏览器,测试使用的三种浏览器均为当前较新的版本。
一、HTML代码和CSS代码:
<tr> <td class="tdTitle"> <span style="color: Red;">*</span>学校名称: </td> <td> <div> <input id="sclName" type="text" name="edu_Grade.Scl.Name" class="tipInput" tip="" value="#{edu_Grade.Scl.Name}" autocomplete="off" /> <span class="valid" msg="学校名称不能为空" mode="" rule="" ajaxaction="#{ajaxCheckUrl}"> </span> <input id="hidSclName" type="hidden" name="edu_Grade.Scl" value="#{edu_Grade.Scl.Id}" /> <!--模糊搜索结果显示div--> <div id="divSel" style="border: solid 1px #666; height: 95px; 200px; background-color: #fff; position: absolute; display: none; overflow: auto; z-index: 99999;"> </div> </div> </td> </tr>
<style type="text/css"> .divItem:hover { cursor: pointer; } .divItem:nth-child(even) { background-color: #e9e9e9; } .tdTitle { width: 120px; text-align: right; } .itemHighlight { background-color: #6666aa !important; cursor: pointer; } </style>
二、JavaScript代码:
<script type="text/javascript"> _run(function () { $("#sclName").keyup(function (event) { searchSchool(event); //模糊搜索学校 }); $("#sclName").keydown(function (event) { searchKeyDown(this, event); //上下键和Enter键 }); $("body").click(function () { $("#divSel").css("display", "none"); //模糊搜索结果显示div }); }); //模糊搜索学校 var lastKey = ""; function searchSchool(evt) { var key = $.trim($("#sclName").val()); //取用户输入的关键字 if (key == "" && evt.keyCode != 38 && evt.keyCode != 40 && evt.keyCode != 13) { //如果用户输入的关键字为空,则不搜索 $("#divSel").css("display", "none"); return; } if (key != lastKey && evt.keyCode != 38 && evt.keyCode != 40 && evt.keyCode != 13) { $.ajax({ type: "GET", url: "#{searchSchoolUrl}", data: "key=" + escape(key), //传参 success: function (data) { if (data.length && data.length != 0) { //如果结果不为空 maxIndex = data.length - 1; $("#divSel").css("display", ""); var html = ""; for (var i = 0; i < data.length; i++) { html += "<div onclick='divItemClick(this)' itemId='" + data[i].Id + "' itemIndex='" + i + "' class='divItem' onmouseover='divItemMouseOver(this)' >" + data[i].Name + "</div>"; } $("#divSel").html(html); $("#sclName").css("border", "solid 1px #000"); } else { //搜索不到结果 $("#sclName").css("border", "dashed 1px red"); $("#divSel").css("display", "none"); $("#hidSclName").val(""); } if (data.length = 1) { //搜索结果有且只有一个 $("#hidSclName").val(data[0].Id); } } }); } } //模糊搜索结果选项点击事件 function divItemClick(obj) { $("#sclName").val($(obj).text()); $("#sclName").css("color", "#000"); $("#hidSclName").val($(obj).attr("itemId")); $("#sclName").focus(); $("#divSel").css("display", "none"); $("#sclName").blur(); } //上下键和Enter键 var itemIndex = -1; var maxIndex = -1; function searchKeyDown(obj, evt) { if (evt.keyCode != 38 && evt.keyCode != 40 && evt.keyCode != 13) { itemIndex = -1; } var key = $.trim($("#sclName").val()); //取用户输入的关键字 lastKey = key; if (evt.keyCode == 40) { //下移 if (itemIndex >= 0) { var preItem = $("#divSel").find("div:eq(" + itemIndex + ")"); preItem.removeClass("itemHighlight"); } if ($("#divSel").find("div:eq(" + (itemIndex + 1) + ")").length > 0) { itemIndex++; } else { itemIndex = 0; } var item = $("#divSel").find("div:eq(" + itemIndex + ")"); item.addClass("itemHighlight"); if ($("#divSel").scrollTop() < item.height() * (itemIndex - 4) || $("#divSel").scrollTop() > item.height() * (itemIndex + 4)) { $("#divSel").scrollTop(item.height() * (itemIndex - 4)); } } if (evt.keyCode == 38) { //上移 if (itemIndex >= 0) { var preItem = $("#divSel").find("div:eq(" + itemIndex + ")"); preItem.removeClass("itemHighlight"); } if (itemIndex > 0) { itemIndex--; } else { itemIndex = maxIndex; } var item = $("#divSel").find("div:eq(" + itemIndex + ")"); item.addClass("itemHighlight"); if ($("#divSel").scrollTop() > item.height() * itemIndex || $("#divSel").scrollTop() < item.height() * (itemIndex - 4)) { $("#divSel").scrollTop(item.height() * itemIndex); } } if (evt.keyCode == 13) { //Enter var item = $("#divSel").find("div:eq(" + itemIndex + ")"); item.click(); var key = $.trim($("#sclName").val()); //取用户输入的关键字 lastKey = key; evt.returnValue = false; } } //鼠标移入 function divItemMouseOver(obj) { var item = $("#divSel").find("div"); item.removeClass("itemHighlight"); itemIndex = parseInt($(obj).attr("itemIndex")); item = $(obj); item.addClass("itemHighlight"); $("#sclName").focus(); } </script>
三、控制器代码:
/// <summary> /// 查询学校 /// </summary> public void SearchSchool() { string key = (string)ctx.Get("key"); List<Edu_School> sclList = edu_SchoolService.GetListByNameKey(key);//根据关键字查询学校集合 if (sclList != null && sclList.Count > 0) { List<Dictionary<string, string>> dicList = new List<Dictionary<string, string>>(); foreach (Edu_School scl in sclList) { Dictionary<string, string> dic = new Dictionary<string, string>(); dic.Add("Id", scl.Id.ToString()); dic.Add("Name", scl.Name); dicList.Add(dic); } echoJson(dicList); } else { echoText(null);//搜索不到返回空 } }
效果图: