如何使用html实现下拉框和搜索框为一体的功能？

各位大佬。我想用HTML实现“下拉框”和“搜索框”形成为一体的功能，这该如何实现？

html?你应该搜索 js下拉搜索框或者某个框架的搜索框组件，用框架组件比较方便

1. 监听 input 的输入变化， input 值变化时从后台获取数据更新 select 的 option，点击 option 时将 option 的值放回到 input 中

2. 先初始化 select option，监听 input 的焦点事件，input 获取焦点时打开 select，点击 option 时将 option 的值放回到 input 中

3. 用现成框架组件

试试datalist控件，是这个意思吗

你可以尝试用vue+elementui框架，都有现成的代码

各楼都说的正确
如果前端项目是node的话，引入组件方便，避免自己开发调试等过程还不会出bug
如果不想引用组件，Leo.H.J 他的思路也是可行的

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实现下拉框和搜索框一体功能</title>
</head>
<body>
<h4>这个既可以做input 又可以使用 select</h4>
<div style="position: relative;" class="form-control">
<span style="margin-left: 100px; width: 50%; overflow: hidden;">
<select name="faultDiscription" style="width:50%; margin-left: -100px;" id="selected_">
    <option value="27">1</option>
    <option value="23">2</option>
    <option value="25">3</option>
    <option value="13">4</option>
    <option value="24">5</option>
    <option value="4">6</option>
    <option value="5">7</option>
    <option value="26">8</option>
    <option value="21">9</option>
    <option value="10">10</option>
    <option value="12">11</option>
    <option value="11">12</option>
</select>
</span>
    <input id="faultDiscription" name="box" style="width: 45%; position: absolute; left: 0px; padding: 0 12px;">
</div>
<script src="jquery.js"></script>
<script>
    /*取消默认初始化的时候  默认选择第一个option选项*/
//当选择下拉按钮时  让选择的项在input 框显示
    $("#selected_").change(function(){
        var aa=$("#selected_ option:selected").text();
        $("#faultDiscription").val(aa);
    });
    $('#selected_')[0].selectedIndex = -1;
</script>
</body>
</html>