利用jQuery实现可输入搜索文字的下拉框


Posted in Javascript onOctober 23, 2013

先看效果
利用jQuery实现可输入搜索文字的下拉框 
利用jQuery实现可输入搜索文字的下拉框 
功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面。
用的的js:

var $xialaSELECT; 
$(document).ready(function(){ 
initXialaSelect(); 
initSearch(); 
}); 
var temptimeout=null; 
var query=""; 
function searchDev(key){ 
//if(key == "")return; 
query=key; 
clearTimeout(temptimeout); 
temptimeout= setTimeout(findUnSaved, 500); 
} 
function findUnSaved() 
{ 
//alert("dd"); 
//if(1==1)return; 
$.ajax({ 
type: "post", 
data:{'query':query}, 
url: path + "/tList.action", 
success: function(data) { 
xiala(data); 
}, 
error: function(data) { 
alert("加载失败,请重试!"); 
} 
}); 
} 
function initSearch() 
{ 
//定义一个下拉按钮层,并配置样式(位置,定位点坐标,大小,背景图片,Z轴),追加到文本框后面 
$xialaDIV = $('<div></div>').css('position', 'absolute').css('left', $('#province').position().left + $('#province').width() - 15 + 'px').css('top', 
$('#province').position().top + 4 + 'px').css('background', 'transparent url(../images/lala.gif) no-repeat top left').css('height', '16px').css('width', 
'15px').css('z-index', '100'); 
$('#province').after($xialaDIV); 
//鼠标进入修改背景图位置 
$xialaDIV.mouseover(function(){ 
$xialaDIV.css('background-position', ' 0% -16px'); 
}); 
//鼠标移出修改背景图位置 
$xialaDIV.mouseout(function(){ 
$xialaDIV.css('background-position', ' 0% -0px'); 
}); 
//鼠标按下修改背景图位置 
$xialaDIV.mousedown(function(){ 
$xialaDIV.css('background-position', ' 0% -32px'); 
}); 
//鼠标释放修改背景图位置 
$xialaDIV.mouseup(function(){ 
$xialaDIV.css('background-position', ' 0% -16px'); 
if($xialaSELECT) 
$xialaSELECT.show(); 
}); 
$('#province').mouseup(function(){ 
$xialaDIV.css('background-position', ' 0% -16px'); 
$xialaSELECT.show(); 
}); 
} 
var firstTimeYes=1; 
//文本框的下拉框div 
function xiala(data){ 
//first time 
if($xialaSELECT) 
{ 
$xialaSELECT.empty(); 
} 
//定义一个下拉框层,并配置样式(位置,定位点坐标,宽度,Z轴),先将其隐藏 
//定义五个选项层,并配置样式(宽度,Z轴一定要比下拉框层高),添加name、value属性,加入下拉框层 
$xialaSELECT.append(data); 
if(firstTimeYes == 1) 
{ 
firstTimeYes =firstTimeYes+1; 
}else{ 
$xialaSELECT.show(); 
} 
} 
function initXialaSelect() 
{ 
$xialaSELECT = $('<div></div>').css('position', 'absolute').css('overflow-y','scroll').css('overflow-x','hidden').css('border', '1px solid #809DB9').css('border-top','none').css('left', '125px').css 
('top', $('#province').position().top + $('#province').height() + 6 + 'px').css('width', $('#province').width() + 'px').css('z-index', '101').css('width','152px').css('background','#fff').css('height','200px').css('max-height','600px'); 
$('#province').after($xialaSELECT); 
//选项层的鼠标移入移出样式 
$xialaSELECT.mouseover(function(event){ 
if ($(event.target).attr('name') == 'option') { 
//移入时背景色变深,字色变白 
$(event.target).css('background-color', '#000077').css('color', 'white'); 
$(event.target).mouseout(function(){ 
//移出是背景色变白,字色变黑 
$(event.target).css('background-color', '#FFFFFF').css('color', '#000000'); 
}); 
} 
}); 
//通过点击位置,判断弹出的显示 
$xialaSELECT.mouseup(function(event){ 
//如果是下拉按钮层或下拉框层,则依然显示下拉框层 
if (event.target == $xialaSELECT.get(0) || event.target == $xialaDIV.get(0)) { 
$xialaSELECT.show(); 
} 
else { 
//如果是选项层,则改变文本框的值 
if ($(event.target).attr('name') == 'option') { 
//弹出value观察 
$('#nce').val($(event.target).html()); 
$('#d').val($(event.target).attr("d")); 
//if seleced host then hidden the dev type 
if($(event.target).attr("ass") == 3305) 
{ 
$("#ype").hide(); 
$("#ost").val(1); 
}else{ 
$("#ype").show(); 
$("#ost").val(-1); 
} 
} 
//如果是其他位置,则将下拉框层 
if ($xialaSELECT.css('display') == 'block') { 
$xialaSELECT.hide(); 
} 
} 
}); 
$xialaSELECT.hide(); 
} 
var k = 1; 
document.onclick = clicks; 
function clicks() 
{ 
if(k ==2){ 
k = 1; 
if($xialaSELECT) 
{ 
if ($xialaSELECT.css('display') == 'block') { 
$xialaSELECT.hide(); 
} 
} 
}else{ 
k = 2; 
} 
}

.cba { 
width: 150px; 
height: 18px; 
} 
.selectlala { 
text-align: left; 
line-height: 20px; 
padding-left: 5px; 
width: 147px; 
font-family: Arial,verdana,tahoma; 
height: 20px; 
} 
<input type="text" name="province" id="province" class="cba" onkeyup="searchDev(this.value)"/>
Javascript 相关文章推荐
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
第一篇初识bootstrap
Jun 21 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
微信小程序实现音乐播放页面布局
Dec 11 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 #Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 #Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 #Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 #Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 #Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 #Javascript
JS Date函数整理方便使用
Oct 23 #Javascript
You might like
具有时效性的php加密解密函数代码
2013/06/19 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
jQuery链使用指南
2015/01/20 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
如何将python中的List转化成dictionary
2016/08/15 Python
基于python 字符编码的理解
2017/09/02 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
Gap工厂店:Gap Factory
2017/11/02 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
家长给幼儿园的表扬信
2014/01/09 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
房地产活动策划方案
2014/05/14 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
同学聚会邀请函
2015/01/30 职场文书
中学教师读书笔记
2015/07/01 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS