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

Question

只有 JQuery 和 Javascript 的基本知识，这让我很生气。本质上，当在输入框中输入某些文本时，我希望有一个下拉列表自动选择。 例如。 “Foo”是“Category4”项，因此如果有人在输入框中键入 Foo，则选择框应自动选择选项 19。 “Bar”是一个“Category7”项，所以选择框应该选择选项8是有人在输入框中键入Bar。

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

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

<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

另一种可以用jquery find的方法 更多详情Click here

$(document).ready(function() {
  var Obj = [
    {
      word : 'FOO',
      category : '19'
    },
    {
      word : 'Bar',
      category : '8'
    },
    {
      word : 'Prashant',
      category : '25'
    },
  ];
  $("#input").on('change' , function() {
    var val = $("#input").val();
    var oFindObj = Obj.find(x=>x.word.toLowerCase().trim()==$.trim(val.toLowerCase()));
    if(oFindObj!=undefined){
      $("#category").val(oFindObj.category);
    }
  });
});

<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">

Answer 2

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

$(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()