一，需求
初始隐藏，单击唤出下拉框，可以在输入框内输入内容，下拉框模糊查询出对应的数据显示，单机选中下拉框内容后隐藏，并回显选中的内容到输入框内。
二，代码
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>
初始隐藏，单击唤出下拉框，可以在输入框内输入内容，下拉框模糊查询出对应的数据显示，单机选中下拉框内容后隐藏，并回显选中的内容到输入框内。
二，代码
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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步