步骤：
1、在文本框中输入内容时，触发keyup事件；
2、在keyup事件的处理方法中，通过Ajax调用控制器的方法；
3、在控制器方法中，搜索满足条件的数据，这里分页获取数据，且只取第一页的数据，返回Json数据；
4、JavaScript处理返回的数据，拼HTML，生成列表框，并为列表框添加鼠标点击事件。
一、HTML代码和CSS代码：
<tr> <td class="tdTitle"> 学校名称: </td> <td> <div> <input id="sclName" type="text" name="sys_Grade.Scl.Name" class="tipInput" tip="请输入学校名称" value="#{sys_Grade.Scl.Name}" onkeyup="searchSchool()" /> <span class="valid" msg="学校名称不能为空" mode="" rule="" ajaxaction="#{ajaxCheckUrl}"> </span> <input id="hidSclName" type="hidden" name="sys_Grade.Scl" value="#{sys_Grade.Scl.Id}" /> <!--模糊搜索结果显示div--> <div id="divSel" style="border: solid 1px #666; height: 95px; width: 200px; background-color: #fff; position: absolute; display: none; overflow: hidden; z-index: 99999;"> </div> </div> </td> </tr>
.divItem:hover { background-color: #dddddd; cursor: pointer; }
二、JavaScript代码：
<script type="text/javascript">
//模糊搜索学校
function searchSchool() {
var key = $("#sclName").val(); //取用户输入的关键字
if ($.trim(key) == "") { //如果用户输入的关键字为空，则不搜索
$("#divSel").css("display", "none");
return;
}
$.ajax({
type: "GET",
url: "/School/Sys_Grade/SearchSchool",
data: "key=" + escape(key), //传参
success: function (data) {
if (data.length != 0) { //如果结果不为空
$("#divSel").css("display", "");
var html = "";
for (var i = 0; i < data.length; i++) {
html += "<div onclick=‘divItemClick(this)‘ itemId=‘" + data[i].Id + "‘ class=‘divItem‘>" + 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");
}
</script>
三、控制器代码：
/// <summary> /// 查询学校 /// </summary> public void SearchSchool() { string key = (string)ctx.Get("key"); try { List<Sys_School> sclList = Sys_SchoolService.GetListQueryName(key);//根据关键字查询学校集合 if (sclList != null && sclList.Count > 0) { List<Dictionary<string, string>> dicList = new List<Dictionary<string, string>>(); foreach (Sys_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);//搜索不到返回空 } } catch { echoText(null);//出错返回空，表示不做任何处理 } }
四、Service层代码：
/// <summary> /// 学校管理 /// </summary> public class Sys_SchoolService { /// <summary> /// 根据学校名称关键字查询学校集合 /// </summary> /// <param name="key">学校名称关键字</param> public static List<Sys_School> GetListQueryName(string key) { return Sys_School.findPage("Name like ‘%" + key + "%‘ order by Name", 5).Results; } }