利用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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
php实现的递归提成方案实例
2015/11/14 PHP
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python pdb调试方法分享
2014/01/21 Python
Python+django实现文件上传
2016/01/17 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Python 调用Java实例详解
2017/06/02 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
解决python 输出是省略号的问题
2018/04/19 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
python3访问字典里的值实例方法
2020/11/18 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
高中自我鉴定范文
2013/11/03 职场文书
个人自我评价范文
2014/02/05 职场文书
国旗下演讲稿
2014/05/08 职场文书
户外宣传策划方案
2014/05/25 职场文书
2014年就业工作总结
2014/11/26 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
男方婚前保证书
2015/02/28 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书