利用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 相关文章推荐
jquery设置控件位置的方法
Aug 21 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
jQuery功能函数详解
Feb 01 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 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(6) 面向对象
2010/02/16 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python的绘图工具matplotlib使用实例
2014/07/03 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
从0开始的Python学习016异常
2019/04/08 Python
python多线程同步之文件读写控制
2021/02/25 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
大学班长的职责
2014/01/27 职场文书
新闻发布会主持词
2014/03/28 职场文书
环保倡议书400字
2014/05/15 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
成绩单家长意见
2015/06/03 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书