利用jQuery實現(xiàn)可輸入搜索文字的下拉框
更新時間:2013年10月23日 18:05:20 作者:
jQuery實現(xiàn)點擊下拉框輸入框時,自動顯示下面的下拉列表,而且是根據(jù)輸入框中輸入的搜索添加,自動在后臺查找,然后傳到前臺,展現(xiàn)頁面
先看效果
功能:點擊下拉框輸入框時,自動顯示下面的下拉列表,而且是根據(jù)輸入框中輸入的搜索添加,自動在后臺查找,然后傳到前臺,展現(xiàn)頁面。
用的的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()
{
//定義一個下拉按鈕層,并配置樣式(位置,定位點坐標(biāo),大小,背景圖片,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);
//鼠標(biāo)進(jìn)入修改背景圖位置
$xialaDIV.mouseover(function(){
$xialaDIV.css('background-position', ' 0% -16px');
});
//鼠標(biāo)移出修改背景圖位置
$xialaDIV.mouseout(function(){
$xialaDIV.css('background-position', ' 0% -0px');
});
//鼠標(biāo)按下修改背景圖位置
$xialaDIV.mousedown(function(){
$xialaDIV.css('background-position', ' 0% -32px');
});
//鼠標(biāo)釋放修改背景圖位置
$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();
}
//定義一個下拉框?qū)?,并配置樣?位置,定位點坐標(biāo),寬度,Z軸),先將其隱藏
//定義五個選項層,并配置樣式(寬度,Z軸一定要比下拉框?qū)痈?,添加name、value屬性,加入下拉框?qū)?
$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);
//選項層的鼠標(biāo)移入移出樣式
$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){
//如果是下拉按鈕層或下拉框?qū)?,則依然顯示下拉框?qū)?
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);
}
}
//如果是其他位置,則將下拉框?qū)?
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)"/>


功能:點擊下拉框輸入框時,自動顯示下面的下拉列表,而且是根據(jù)輸入框中輸入的搜索添加,自動在后臺查找,然后傳到前臺,展現(xiàn)頁面。
用的的js:
復(fù)制代碼 代碼如下:
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()
{
//定義一個下拉按鈕層,并配置樣式(位置,定位點坐標(biāo),大小,背景圖片,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);
//鼠標(biāo)進(jìn)入修改背景圖位置
$xialaDIV.mouseover(function(){
$xialaDIV.css('background-position', ' 0% -16px');
});
//鼠標(biāo)移出修改背景圖位置
$xialaDIV.mouseout(function(){
$xialaDIV.css('background-position', ' 0% -0px');
});
//鼠標(biāo)按下修改背景圖位置
$xialaDIV.mousedown(function(){
$xialaDIV.css('background-position', ' 0% -32px');
});
//鼠標(biāo)釋放修改背景圖位置
$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();
}
//定義一個下拉框?qū)?,并配置樣?位置,定位點坐標(biāo),寬度,Z軸),先將其隱藏
//定義五個選項層,并配置樣式(寬度,Z軸一定要比下拉框?qū)痈?,添加name、value屬性,加入下拉框?qū)?
$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);
//選項層的鼠標(biāo)移入移出樣式
$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){
//如果是下拉按鈕層或下拉框?qū)?,則依然顯示下拉框?qū)?
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);
}
}
//如果是其他位置,則將下拉框?qū)?
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;
}
}
復(fù)制代碼 代碼如下:
.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)"/>
您可能感興趣的文章:
- jQuery操作select下拉框的text值和value值的方法
- jquery multiSelect 多選下拉框
- 基于jQuery的select下拉框選擇觸發(fā)事件實例分析
- jquery及原生js獲取select下拉框選中的值示例
- jquery獲得下拉框值的代碼
- jquery動態(tài)加載select下拉框示例代碼
- jQuery+easyui中的combobox實現(xiàn)下拉框特效
- Jquery操作下拉框(DropDownList)實現(xiàn)取值賦值
- jQuery實現(xiàn)監(jiān)聽下拉框選中內(nèi)容發(fā)生改變操作示例
- 原生jQuery實現(xiàn)只顯示年份下拉框
相關(guān)文章
jquery中map函數(shù)與each函數(shù)的區(qū)別實例介紹
​jquery中的each函數(shù)和map函數(shù)的用法看起來差不多,但其實還是有一點區(qū)別的,each返回的是原來的數(shù)組,并不會新創(chuàng)建一個數(shù)組。而map方法會返回一個新的數(shù)組2014-06-06jquery插件unobtrusive實現(xiàn)片段式加載
本文給大家分享的是使用jquery插件unobtrusive實現(xiàn)片段式加載,效果非常不錯,有需要的小伙伴可以參考下。2015-06-06javascript loadScript異步加載腳本示例講解
本文講解了javascript異步加載腳本并觸發(fā)回調(diào)函數(shù)的方法,在加載遠(yuǎn)程數(shù)據(jù)的時候可以用到,下面提供代碼示例和源碼2013-11-11基于jquery實現(xiàn)的鼠標(biāo)滑過按鈕改變背景圖片
基于jquery實現(xiàn)的鼠標(biāo)滑過按鈕改變背景圖片,發(fā)現(xiàn)用CSS用時IE6不兼容,所以就用見JQ實現(xiàn)。2011-07-07jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法實例分析
這篇文章主要介紹了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法,結(jié)合實例形式分析了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器相關(guān)功能、原理及使用方法,需要的朋友可以參考下2019-02-02chosen實現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要為大家詳細(xì) 介紹了chosen實現(xiàn)省市區(qū)三級聯(lián)動,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-08-08jQuery獲取table表中的td標(biāo)簽(實例講解)
下面小編就為大家?guī)硪黄猨Query獲取table表中的td標(biāo)簽(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07