javascript - JQuery使用输入文本预选下拉框

Question

仅对 JQuery 和 Javascript 有基本了解，这简直要了我的命。本质上，我希望在输入框中输入某些文本时自动选择下拉列表。 例如。 “Foo”是“Category4”项，因此如果有人在输入框中键入 Foo，选择框应自动选择选项 19。 “Bar”是“Category7”项，因此选择框应选择选项 8，即有人在输入框中键入 Bar。

之所以没有硬编码，是因为用户仍然可以选择对这些项目进行重新分类(如果他们认为合适)。 IE。通常“Bar”是“Category7”项，因此脚本应该自动选择选项8，但用户可以通过在下拉框中手动选择“Bar”将其更改为“Category1”项，并且脚本不应该覆盖手动选择。

我已经搜索了下面的脚本，可以让我在输入框中输入类别的名称，并将其填充到下拉列表中，但我无法进入下一步输入，将其与预定义响应列表进行比较，并使用它来填充下拉列表。

<p id="demo"></p>
<input type="text" id="input" placeholder="input">
<select id="category">
  <option value="categoryplaceholder">Category</option>
  <option value="5">Category1</option>
  <option value="22">Category2</option>
  <option value="3">Category3</option>
  <option value="19">Category4</option>
  <option value="23">Category5</option>
  <option value="25">Category6</option>
  <option value="8">Category7</option>
</select>
<input type="submit" value="submit">

$(document).ready(function() {
  $("#input").change(function() {
    var val = $("#input").val();
    $("#category > option").each(function() { //Run through the loop of each option
      if (this.text.indexOf(val) >= 0) { //Find if the string present as substring
        $("#category > option").removeAttr("selected"); //Remove the existing selected option
        $(this).attr("selected", "selected"); //Select this matching option as selected
        return false; //Return after first match is found
      }
    });
  });
});

非常感谢您的帮助! https://jsfiddle.net/chuckler/w52kfpcy/

Answer 1

您可以使用一个对象来保存您的单词及其类别

$(document).ready(function() {
  var Obj = [
    {
      word : 'FOO',
      category : '19'
    },
    {
      word : 'Bar',
      category : '8'
    },
  ];
  $("#input").on('change' , function() {
    var val = $("#input").val();
    $.each(Obj , function(i , v){
      if(v.word.toLowerCase().trim() == val.toLowerCase().trim()){
        $('#category').val(v.category);
        return false;
      }
    })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="demo"></p>
<input type="text" id="input" placeholder="input">
<select id="category">
  <option value="categoryplaceholder">Category</option>
  <option value="5">Category1</option>
  <option value="22">Category2</option>
  <option value="3">Category3</option>
  <option value="19">Category4</option>
  <option value="23">Category5</option>
  <option value="25">Category6</option>
  <option value="8">Category7</option>
</select>
<input type="submit" value="submit">

考虑:

• 输入 .change 事件将在焦点移出诸如 blur 之类的内容后触发
• 使用 .text() 使用选项文本而不是其值
• 使用.trim()删除左/右的任何空格
• 使用 .toLowerCase() 区分字母大小写
• 如果您需要实时更改，可以使用 .on('input' , function(){....}) 而不是 .change()