利用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;
}
克利夫兰 骑士
金州 勇士
波士顿 凯尔特人
休斯顿 火箭
搜索结果tab隐藏
全部
姓名
位置
介绍
搜索
号码姓名位置身高体重介绍
23勒布朗-詹姆斯小前锋203CM113KG四届NBA最有价值球员奖2凯尔-欧文控球后卫191CM88KG15-16赛季NBA总冠军0凯文-乐福大前锋/中锋208CM110KG15-16赛季获得NBA总冠军13特里斯坦-汤普森大前锋206CM103KG擅长拼抢进攻篮板球5J.R.史密斯得分后卫198CM102KG15-16赛季NBA总冠军
号码姓名位置身高体重介绍
30斯蒂芬-库里控球后卫191CM83.9KG两届NBA最有价值球员奖 三分精准11克莱-汤普森得分后卫201CM93KG14-15赛季NBA总冠军35凯文-杜兰特小前锋/大前锋211CM106.6KG得分手段多样投篮精准23德雷蒙德-格林前锋201CM104KG顶级锋线防守者9安德鲁-伊格达拉得分后卫198CM94KG迷你版勒布朗身体素质极佳
号码姓名位置身高体重介绍
4以赛亚-托马斯控球后卫175CM84KG球风强硬 能够突破 具备三分射程0埃弗里-布拉德利控球后卫188CM82KG15-16赛季最佳防守阵容第一阵容42艾尔-霍福德中锋208CM111KG球风全面的内线 中距离精准9贾伊-克劳德大前锋198CM107KG能量四射的双能锋36马库斯-斯玛特控球后卫193CM100KG敢于突破不惧身体对抗球风无私
号码姓名位置身高体重介绍
13詹姆斯-哈登后卫196CM99.8KG两次入选NBA最佳阵容第一阵容1特雷沃-阿里扎小前锋203CM95.3KG08-09赛季NBA总冠军2帕特里克-贝弗利控球后卫185CM84KG全明星技巧挑战赛冠军10埃里克-戈登得分后卫191CM100.7KG属于攻击型得分后卫3莱恩-安德森大前锋208CM109KG投篮型内线出手快
搜索结果
号码姓名位置身高体重介绍
信息摘自互联网内容 若有冒犯请原谅 请留言反馈 立即删除
$('#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的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。
如果觉得《php可输入的下拉框 jQuery实现可输入搜索文字的下拉框实例代码》对你有帮助，请点赞、收藏，并留下你的观点哦！
