步骤：
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>
<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 > )
{
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);//搜索不到返回空
}
}
效果图：