给文本框添加模糊搜索功能（“我记录”MVC框架下实现）

步骤：

1、在文本框中输入内容时，触发keyup事件；

2、在keyup事件的处理方法中，通过Ajax调用控制器的方法；

3、在控制器方法中，搜索满足条件的数据，这里分页获取数据，且只取第一页的数据，返回Json数据；

4、JavaScript处理返回的数据，拼HTML，生成列表框，并为列表框添加鼠标点击事件；

说明：

1、实现了通过上下键和Enter键选择列表项功能；

2、使用jQuery给文本框添加事件，尽量避免直接使用JavaScript，这样就不用考虑浏览器兼容问题了，因为jQuery已经做了。

3、经过测试，支持IE、火狐、谷歌浏览器，测试使用的三种浏览器均为当前较新的版本。

一、HTML代码和CSS代码：

/// <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

效果图：