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

来源:转载

步骤:

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

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

 

效果图:

 


分享给朋友:
您可能感兴趣的文章:
随机阅读: