1、在文本框中输入内容时，触发keyup事件；
2、在keyup事件的处理方法中，通过Ajax调用控制器的方法；
3、在控制器方法中，搜索满足条件的数据，这里分页获取数据，且只取第一页的数据，返回Json数据；
4、
JavaScript处理返回的数据，拼HTML，生成列表框，并为列表框添加鼠标点击事件。
一、HTML代码和CSS代码：
复制代码
学校名称:
value="#{sys_Grade.Scl.Name}" onkeyup="searchSchool()" />
复制代码
.divItem:hover
{
background-color: #dddddd;
cursor: pointer;
}
二、java script代码：
复制代码
<script type="text/java script">
//模糊搜索学校
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 += "
" + data[i].Name + "
";
}
$("#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");
}
复制代码
三、控制器代码：
复制代码
///
/// 查询学校
///
public void SearchSchool()
{
string key = (string)ctx.Get("key");
try
{
List sclList = Sys_SchoolService.GetListQueryName(key);//根据关键字查询学校集合
if (sclList != null && sclList.Count > 0)
{
List> dicList = new List>();
foreach (Sys_School scl in sclList)
{
Dictionary dic = new Dictionary();
dic.Add("Id", scl.Id.ToString());
dic.Add("Name", scl.Name);
dicList.Add(dic);
}
echoJson(dicList);
}
else
{
echoText(null);//搜索不到返回空
}
}
catch
{
echoText(null);//出错返回空，表示不做任何处理
}
}
复制代码
四、Service层代码：
复制代码
///
/// 学校管理
///
public class Sys_SchoolService
{
///
/// 根据学校名称关键字查询学校集合
///
/// 学校名称关键字
public static List GetListQueryName(string key)
{
return Sys_School.findPage("Name like '%"