关于下拉框搜索功能(模糊搜索)

本文介绍了一种使用HTML、CSS及JavaScript实现的下拉框模糊查询功能。具体步骤包括:定义HTML结构、通过AJAX获取数据填充下拉框、实现输入框内容动态查询以及调整下拉框样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 首先在html页面定义一个div和获取下拉菜单的div
这里写图片描述

<div class="col-xs-7">
 <input type="text" class="form-control" placeholder="请选择上报机构" id="reportOrgan" onblur="setTimeout('hideOrganDiv()',200);" onfocus="getOrganList();" onkeydown="clearInput();" onkeyup="innerKeydown();" autocomplete="off">
</div>

<div id="organ" onclick="hideOrganDiv();">
       </div>

2. 通过ajax获取后台传过来的数据实现onfocus这个方法
(这里写的是你获取你要做下拉功能的数据)

//获取所有上报机构
function getOrganList(){

    var parms = new Object();   
    parms["reportOrgan"]=$("#reportOrgan").val();
    $.ajax({
        cache: true,
        type: "POST",
        url: ctx+'/report/findOrganList.do',
        data: parms,
        async: false,
        success:function(data){
            var json = $.parseJSON(data);
            if(json.data.length > 15){
                var html = "<table class='altrowstable'>";
            }else{
                var html = "<table class='altrowstables'>";
            }
            for(var i=0;i<json.data.length;i++){
                html += "<tr><td onclick=\"selectValue(this);\">" +  json.data[i].sysOrganName + "</td></tr>";
            }
            html += "</table>";
            //将获得的数据填充到下拉的数据框里也就是table里
            $("#organ").html(html);
            $("#organ").css("display", "block");
            $("#organ").css("left", $("#reportOrgan").offset().left + "px");
            $("#organ").css("top", $("#reportOrgan").offset().top + $("#reportOrgan").height() + 14 + "px");
        },
        error: function(request) {
            layer.msg("Connection error", {
                icon : 2
            });
        }
    });
}

3. 获取输入框的内容并动态查询

//选择机构
function selectValue(obj){
    var organName = $(obj).text();
    $("#reportOrgan").val(organName);
}
//输入框中根据用户输入内容动态查询
var clocker = null;
function innerKeydown() {
    if(null == clocker) {
        clocker = setTimeout(getOrganList,700);
        //连续击键,重新开始计时
    } else {
        clearTimeout(clocker);
        clocker = setTimeout(getOrganList,700);
    }
}

function hideOrganDiv(){
    $("#organ").css("display", "none");
}

function clearInput(){
    $("#reportOrgan").val("");
}

4. 调试下拉框的样式

<style>
#organ{height:auto; width:200px; position:absolute; display:none; border:1px solid silver;background-color: white;z-index: 10;}
table.altrowstable {
    font-family: verdana,arial,sans-serif;
    font-size:15px;
    color:#333333;
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
    background: white;
    display:block;
    height:300px;
    overflow:auto;
}
table.altrowstables {
    font-family: verdana,arial,sans-serif;
    font-size:15px;
    color:#333333;
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
    background: white;
}
table.altrowstable tr {
    border-width: 0px; 
    padding: 1px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.altrowstable td {
    border-width: 0px; 
    padding: 1px;
    border-style: solid;
    border-color: #a9c6c9;
}

</style>

这样一个简单的下拉框模糊查询功能就实现了(^▽^)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值