给文本框添加模糊搜索功能(“我记录”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>
<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);//搜索不到返回空
}
}
效果图:
给文本框添加模糊搜索功能(“我记录”MVC框架下实现)的更多相关文章
- winform中文本框添加拖拽功能
对一个文本框添加拖拽功能: private void txtFolder_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataP ...
- Silverlight中文本框添加回车事件后,换行无法清除的解决方法
在开发Silverlight的项目中,为了更好的用户体验,我们常要给一些控件添加一些快捷键.然而,在Silverlight中当用户回车提交后,光标停留在文本框的第二行怎么也清除不掉,经过一段时间研究, ...
- WinForm -- 为TextBox文本框添加鼠标右键菜单
WinForm -- 为TextBox文本框添加鼠标右键菜单 1. 新建一个WinForm项目,放置一个TextBox控件 2. 从工具箱拖进来一个ContextMenuStrip 3. 将TextB ...
- Web控件文本框Reset的功能
在前一篇中<怎样实现Web控件文本框Reset的功能>http://www.cnblogs.com/insus/p/4120889.html Insus.NET只实现了文本框的功能.单个或 ...
- 给tkinter文本框添加右键菜单
给tkinter文本框添加右键菜单 需求:直接右键点击使用tkinter创建的文本框是不会弹出菜单的.我们需要实现右键点击tkinter框架下的Entry对象.Text对象后弹出右键菜单可复制.粘贴和 ...
- python开发_tkinter_获取文本框内容_给文本框添加键盘输入事件
在之前的blog中有提到python的tkinter中的菜单操作 python开发_tkinter_窗口控件_自己制作的Python IDEL_博主推荐 python开发_tkinter_窗口控件_自 ...
- 基于JQuery实现的文本框自动填充功能
1. 实现的方法 /* * js实现的文本框的自动完成功能 */ function doAutoComplete(textid,dataid,url){ $("#" + texti ...
- html文本框(input)不保存缓存记录
有的时候js往文本框里赋值,结果在火狐中刷新后,刚才赋的值还在,导致好多麻烦的事情,现总结一下解决办法如下: <input name="bestlovesky" type= ...
- ASP.NET输入文本框自动提示功能
在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需 ...
随机推荐
- 深入了解STL中set与hash_set,hash表基础
一,set和hash_set简介 在STL中,set是以红黑树(RB-Tree)作为底层数据结构的,hash_set是以哈希表(Hash table)作为底层数据结构的.set可以在时间复杂度为O(l ...
- ps中如何用抽出功能扣取头发
一些图片中需要扣取人的头发,非常不好扣,本文介绍抽取扣除 打开一个人物图片,用ctrj+j分别复制几个图层,从下往上分别为:背景副本,图层2(用于修改成别的背景),图层1抽头发白色(用于抽头发,强制前 ...
- Python将文本生成二维码
#coding:utf-8 ''' Python生成二维码 v1.0 主要将文本生成二维码图片 测试一:将文本生成白底黑字的二维码图片 测试二:将文本生成带logo的二维码图片 ''' __autho ...
- 仿iOS Segmented Control样式"
同步发表于http://avenwu.net/2015/02/05/styled_radiogroup_segmented_control Fork on github https://github. ...
- 【News】SpagoBI中国官方微信对外发布
爱数据,爱分析,爱达比 致力于国际优秀开源BI应用在中国的普及推广,用数据开启中小企业智慧之门: 扫描上图二维码,关注SpagoBI中国官方微信,2015年8月18日将在腾讯课堂.百度传课.网易云课堂 ...
- wordpress自动保存远程图片插件 DX-auto-save-images
wordpress自动保存远程图片插件DX-auto-save-images 解决了保存文章就可以自动将远程图片保存到你的服务器上了. 具体操作步骤如下: 1.安装启用wordpress自动保存远程图 ...
- IIS兼容模式设置
X-UA-Compatible IE=EmulateIE7 来自为知笔记(Wiz)
- ORACLE 10g 64位下载地址
http://download.oracle.com/otn/nt/oracle10g/10201/102010_win64_x64_database.zip http://download.orac ...
- gitignore for vs
*/**/bin/Debug*/**/bin/Release*/**/obj/Debug*/**/obj/Release*/**/x86/Debug*/**/x86/Release*/**/x64/D ...
- 十分钟理解Gradle
一.什么是Gradle 简单的说,Gradle是一个构建工具,它是用来帮助我们构建app的,构建包括编译.打包等过程.我们可以为Gradle指定构建规则,然后它就会根据我们的“命令”自动为我们构建ap ...