Question

仅仅具备基本的JQuery和Javascript知识，这真使我丧命。本质上，当在输入框中输入某些文本时，我希望下拉列表自动选择。例如。 “ Foo”是“ Category4”项，因此，如果有人在输入框中键入Foo，则选择框应自动选择选项19。 “ Bar”是“ Category7”项，因此选择框应选择选项8，即有人在输入框中键入Bar。

之所以没有进行硬编码，是因为用户仍然可以选择对这些项目进行重新分类。即。通常，“ 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()

Answer 2

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

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

2 个答案: