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

118 阅读 0 评论 78 点赞

我是靠谱客的博主高贵紫菜，最近开发中收集的这篇文章主要介绍利用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)"/> 