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>

我还有一个用于输入身份证号码的文本框。当用户在此文本框中输入值时，我希望现有的选择列表更改为我们从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

您可以做的是让每个option都有一个id并且有一个监听器绑定到文本输入的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");
  });

});

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

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

1 个答案: