关于下拉框搜索功能（模糊搜索）

最新推荐文章于 2025-06-19 09:27:46 发布

JM_杰

最新推荐文章于 2025-06-19 09:27:46 发布

阅读量1.9w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： html java 文章标签：前台

本文链接：https://blog.youkuaiyun.com/dapyandxpy/article/details/80495163

java 同时被 2 个专栏收录

27 篇文章

订阅专栏

html

14 篇文章

订阅专栏

本文介绍了一种使用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>