javascript - 如何在现有选择列表中显示自动完成结果

Question

我有一个现有的多重选择列表，其中包含如下所示的数据。

  <select id="Select2" size="6" multiple>
       <option>11</option>
       <option>12</option>
       <option>115</option>
       <option>116</option>
       <option>128</option>
       <option>111</option>

 </select>

我有一个额外的文本框用于输入 ID 号。 当用户在此文本框中输入值时，我希望现有的选择列表更改为我们从 jquery 的自动完成功能获得的结果。因此如果用户输入 11

我希望选择列表更改为

      <select id="Select2" size="6" multiple>
       <option>11</option>
       <option>115</option>
       <option>116</option>
       <option>111</option>

 </select>

但我不希望使用自动完成 jquery 来自动完成选择列表。 我怎样才能使用 jquery 实现这一点。

Answer 1

Demo

您可以做的是让每个选项都有一个ID，并有一个监听器绑定(bind)到文本输入的keyup事件。在每个 keyup 事件中，

• 文本输入的值将与选项元素的 ID 进行比较。
• 不包含文本的选项应将其 display 属性设置为 none

• 那些包含文本的内容将 display 属性设置为 block

  <input type = "text" id = "text_input" /> 
  
  <select id="select" size="6" multiple>
    <option id = '11'>11</option>
    <option id = '12'>12</option>
    <option id = '115'>115</option>
    <option id = '116'>116</option>
    <option id = '128'>128</option>
    <option id = '111'>111</option>
  </select>
  
  
  $("#text_input").on("keyup", function(){
  
    //get value of input
    var val = $(this).val();
  
    //iterate over options in the select menu
    $("#select option").each(function(){
  
      //if value is not contained inside an option id, hide option element
      if ($(this).attr("id").indexOf(val) == -1)
        $(this).css("display", "none");
  
      //otherwise, show it
      else
        $(this).css("display", "block");
    });
  
  });
  

请注意，如果您不想为此功能绑定(bind) id 属性，则可以使用 HTML data- 属性和 jQuery 的 $(#select").data(... ) 将代替 attr("id")