步驟：

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; width: 200px; background-color: #fff;position: absolute; display: none; overflow: auto; z-index: 99999;"></div></div></td> </tr> View Code <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> View Code

?

二、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 οnclick='divItemClick(this)' itemId='" + data[i].Id + "' itemIndex='" + i + "' class='divItem' οnmοuseοver='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) { //Entervar 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> View Code

?

三、控制器代碼：

/// <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);//搜索不到返回空 } } View Code

?

效果圖：

?

轉載于:https://www.cnblogs.com/s0611163/p/3561456.html

總結

以上是生活随笔為你收集整理的给文本框添加模糊搜索功能（“我记录”MVC框架下实现）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。