jquery 智能搜索文本框
来源:互联网 发布:删除Linux的引导启动项 编辑:程序博客网 时间:2024/05/16 06:45
在网上搜罗了一个智能搜索框觉的还不错,就拔下来改改,用着还不错!样式不太好看,可根据个人爱好调整!
1、控制查询数据的样式
<style>
#searchresult{width:130px; position:absolute;
z-index:1; overflow:hidden; left:130px; top:71px;background:#E0E0E0;
border-top:none;
}
.line{font-size:12px; background:#E0E0E0; width:130px; padding:2px;}
.hover{background:#007ab8; width:130px; color:#fff;}
.std{ width:150px;}
</style>
2、html代码
<input type="text" style=" width:150px;" id="txt_search"/>
<div id="searchresult" style=" display:none;" ></div>
3、js控制代码
--键入事件
$("#txt_search").keyup(function (evt) {
ChangeCoords(); //控制查询结果div坐标
var k = window.event ? evt.keyCode : evt.which;
//输入框的id为txt_search,这里监听输入框的keyup事件
//不为空 && 不为上箭头或下箭头或回车
if ($("#txt_search").val() != "" && k != 38 && k != 40 && k != 13) {
CallAction //ajax请求 替换自己的代码
(
"/Contract/SearchResult",//ajax请求 替换自己的代码
{ searchValue: $("#txt_search").val() },
function (data) {
if (data != "") {
layer = "";
layer = "<table id='aa'>";
for (var i = 0; i < data.length; i++) {
layer += "<tr class='line'><td class='std'>" + data[i] + "</td></tr>";
}
layer += "</table>";
//将结果添加到div中
$("#searchresult").empty();
$("#searchresult").append(layer);
$(".line:first").addClass("hover");
$("#searchresult").css("display", "");
//鼠标移动事件
$(".line").hover(function () {
$(".line").removeClass("hover");
$(this).addClass("hover");
}, function () {
$(this).removeClass("hover");
//$("#searchresult").css("display", "none");
});
//鼠标点击事件
$(".line").click(function () {
$("#txt_search").val($(this).text());
$("#searchresult").css("display", "none");
});
} else {
$("#searchresult").empty();
$("#searchresult").css("display", "none");
}
}
, function () {
$.unblockUI();
$(this).removeClass("hover");
}
);
}
else if (k == 38) {//上箭头
$('#aa tr.hover').prev().addClass("hover");
$('#aa tr.hover').next().removeClass("hover");
//$('#txt_search').val($('#aa tr.hover').text());
} else if (k == 40) {//下箭头
$('#aa tr.hover').next().addClass("hover");
$('#aa tr.hover').prev().removeClass("hover");
//$('#txt_search').val($('#aa tr.hover').text());
}
else if (k == 13) {//回车
$('#txt_search').val($('#aa tr.hover').text());
$("#searchresult").empty();
$("#searchresult").css("display", "none");
}
else {
$("#searchresult").empty();
$("#searchresult").css("display", "none");
}
});
$("#searchresult").bind("mouseleave", function () {
$("#searchresult").empty();
$("#searchresult").css("display", "none");
});
//设置查询结果div坐标
function ChangeCoords() {
// var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离,像素,整型
// var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离,像素,整型(20为搜索输入框的高度)
var left = $("#txt_search").position().left; //获取距离最左端的距离,像素,整型
var top = $("#txt_search").position().top+20; ; //获取距离最顶端的距离,像素,整型(20为搜索输入框的高度)
$("#searchresult").css("left", left + "px"); //重新定义CSS属性
$("#searchresult").css("top", top + "px"); //同上
}
- jquery 智能搜索文本框
- 智能搜索下拉文本框
- jquery+ajax+text文本框智能提示
- jQuery学习16---搜索文本框效果
- 结合jquery实现搜索智能提示
- jquery实现智能感知式搜索
- jquery实现智能感知式搜索
- jQuery Autocomplete实现文本框自动完成搜索功能
- 实现类似google搜索效果,文本框输入智能提示,(经过改进 支持多个文本框的效果)
- C# 文本框 智能提示
- 文本框,智能提示信息
- 智能搜索
- 智能搜索
- 智能搜索
- jQuery 插件 仿百度搜索框智能提示 调用简单!
- loner_li JQuery插件 (autocomplete)仿百度搜索 智能感知效果
- JQuery插件【仿百度搜索 智能感知效果】
- jquery php 百度搜索框智能提示效果
- flex登录界面实例2
- 不带signed或unsigned关键字的char型 无符号数? 有符号数? C标准规定为 Implementation Defined !!!
- 包含arxHeader.h的工程中调用了标准fstream, sstream, iosteam等引发链接问题的解决方案
- 把exe里面的资源通通取出来
- hibernate 4 映射持久化类 | hibernate 实战(第二版) 第4章映射持久化类 | 笔记
- jquery 智能搜索文本框
- 使用异步 I/O 大大提高应用程序的性能
- php-nuke, xoops, mambo 比较
- 股票计算 ,佣金率
- 我思故我在系列—数据结构面试NO.15(题目搜集整理者JULY,非常感谢!!)
- Hadoop源代码分析(MapReduce概论)
- 纯JAVA压缩解压缩 - cntinker的使用
- 调用windows播放器
- Servlet的应用--- ServletConfig和ServletContext