我想创建自动完成选择框

I want to create autocomplete select box

本文关键字：选择 创建      更新时间：2023-09-26

我的html代码是：

<select class="form-control" id="city" style="width:100%; margin-left:2%;">
        <option>Sonal</option>
        <option>abcd</option>
        <option>3</option>
        <option>4</option>
        <option>aaaa</option>
    </select>

我想要什么： 如果我想选择 abcd。 然后会有两种类型的选择方法。

  • 首先单击下拉菜单，然后选择一个选项。

  • 在选择框中键入第二个键，然后相关答案将是过滤器。

    例如：当我们在选择框中键入"a"时，必须在下拉列表中过滤两个选项。

    1.ABCD2.aaaa

看看这些演示小提琴

演示小

提琴1和这个演示小提琴2

这个想法是使用具有过滤器文本的选项重新绑定选择列表中的值。

$('<option>').text(option.text).val(option.value).attr('rel', option.rel)

参考资料

http://dragonfruitdevelopment.com/filter-a-select-menu-with-jquery/

您可以使用 jQuery 自动完成功能，它为任何解决方案提供了所有灵活性。

如果我理解你的问题，你的答案是<datalist>可控的

这是 W3 的示例

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

它是输入和下拉菜单的组合，用户可以写入并过滤下拉列表......

/*This is a generical editable select, with a function can control all editableselect in a html or php page */  
//html
<input type="text"  name="maquina" id="maquinain" syze="30"/>
<input type="button" class="btnselect" id="maquina" value="v"/>
<div class="select" id="maquinadiv">
    <div class="suggest-element" id="something">something</div>
    <div class="suggest-element" id="something1">something1</div>
    <div class="suggest-element" id="something2">something2</div>
    <div class="suggest-element" id="something3">something3</div>
</div>
//css
        .suggest-element{
            margin-left:5px;
            cursor:pointer;
        }
        .select {
            position:absolute;
            z-index: 100;
            width:350px;
            border:1px solid black;
            display:none;
            background-color: white;
        }
//javascrip-jquery
$('.btnselect').click(function(){
    //get input and div
    var inp = $(this).attr('id')+"in";
    var div = $(this).attr('id')+"div";
    //show the div
    document.getElementById(div).style.display = 'block';
    //click in select
    $('.suggest-element').click(function(){
        //get id of the click element
        var id = $(this).attr('id');
        //Edit the input with the click element data
        document.getElementById(inp).value=id;
        //hide the div
        document.getElementById(div).style.display = 'none';
     });
 });
相关文章：