利用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 = $('

$('#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 = $('

('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;

}

jquery实现静态搜索功能(可输入搜索文字)

效果图：

代码如下：

jquery实现静态搜索功能

.navbar-collapse {

padding: 0;

}

.alert {

margin: 20px;

}

.input-group select.form-control:last-child {

border-top-left-radius: 4px;

border-bottom-left-radius: 4px;

margin-right: -1px;

}

.tab-content{

padding-top: 20px;

}

$('#myTabs a').click(function(e) {

e.preventDefault()

$(this).tab('show')

})

$('#searchText').change(function() {

console.log("dd");

var searchText = $(this).val();

var searchSelect = $('#searchSelect').val();

var $searchTr = "";

if(searchText != "") {

$('#search tbody').html("");

//筛选搜索

if(searchSelect == "name") {

$searchTr = $('#myTabContent').find('td:nth-child(2):contains(' + searchText + ')').parent();

} else if(searchSelect == "position") {

$searchTr = $('#myTabContent').find('td:nth-child(3):contains(' + searchText + ')').parent();

} else if(searchSelect == "about") {

$searchTr = $('#myTabContent').find('td:nth-child(6):contains(' + searchText + ')').parent();

} else {

$searchTr = $('#myTabContent').find('td:contains(' + searchText + ')').parent();

}

$searchTr.each(function(i, e) {

$('#search tbody').append($(e).clone(true));

});

//如果没有搜索结果 显示一个报错div

if($searchTr.length <= 0) {

$('#search tbody').html('

')

}

$('#search-tab').tab('show');

}

}).keyup(function() {

$(this).change();

})

$('#searchBth').click(function() {

$('#searchText').change();

})

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持码农之家！

以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。