陋室铭
永远也不要停下学习的脚步(大道至简至易)

posts - 2169,comments - 570,views - 413万
一,需求

初始隐藏,单击唤出下拉框,可以在输入框内输入内容,下拉框模糊查询出对应的数据显示,单机选中下拉框内容后隐藏,并回显选中的内容到输入框内。
二,代码

input.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>解决问题no解决代码问题</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<style>
.search{
    display: block;
    position: absolute;
    z-index: 5px;
    background-color: #ffffff;
    width: auto;
    height: auto;
    border: 1px solid #000;
    overflow: auto;
    max-height: 400px;
}
</style>
<body>
<script type="text/javascript" >
$(document).ready(function(){
    var dataSource = [
        {id:"1",name:"1"},
        {id:"2",name:"12"},
        {id:"3",name:"13"},
        {id:"4",name:"14"},
        {id:"5",name:"112"},
        {id:"6",name:"1234"},
        {id:"7",name:"2"}
    ];
    coverOption(dataSource);
    $("#selectSearch").keyup(function(){
        var val1 =$("#selectSearch").val();
        var newList = [];
        for(var i=0;i<dataSource.length;i++){
            if(dataSource[i].name.indexOf(val1)>-1){
                newList.push(dataSource[i]);
            }
        }
        coverOption(newList);
    });
    $("#selectCustom").hide();
    $("#selectSearch").click(function(){
        $("#selectCustom").show();
    });
    var width1 = $(".zidingyi").width();
    $("#selectCustom").css("margin-left",(width1+5)+'px');
});


function coverOption(list){
    $("#selectCustom").html('');
    var tmp =[];
    for(var i=0;i<list.length;i++){
     var str = '<div><input class="in" name="selectCustom" title="'+list[i].name+'" '+
               ' type="radio" value="'+list[i].id+'" />'+list[i].name+'</div>';
        tmp.push(str);
    }    
    $("#selectCustom").html(tmp);
    $(".in").click(function(){
        var selectSearchVal = $("#selectCustom input[name='selectCustom']:checked").attr("title");
        $("#selectSearch").val(selectSearchVal);
        $("#selectCustom").hide();
    })
}

</script>
<label class="zidingyi">检索 :</label>
<input type="text" id ="selectSearch"/>
<form ation="#" > <div id="selectCustom" class="search"> </div> </form>
</body>
</html>

posted on   宏宇  阅读(207)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
历史上的今天:
2020-08-21 SQL Server 2019安装和卸载
2018-08-21 Solr合并索引方式
2018-08-21 solr研磨之游标分页
2018-08-21 solr研磨之性能调优
2018-08-21 solr研磨之facet
2018-08-21 Solr游标查询提高翻页效率
2018-08-21 solr使用cursorMark做深度分页
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示