关于javascript:jQuery使用输入文本预选下拉框

JQuery use input text to preselect dropdown box

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

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

我仔细检查了下面的脚本,该脚本可以让我在输入框中键入类别的名称,并在下拉列表中进行填充,但是我无法继续进行下一步,将其与预定义响应列表,并使用该列表来填充下拉列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
<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">
1
2
3
4
5
6
7
8
9
10
11
12
$(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/


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(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;
      }
    })
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<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">

考虑:

  • 聚焦blur之类的东西后,将触发输入.change事件
  • 使用.text()来使用选项文本而不是其值
  • 使用.trim()删除左/右的所有空白
  • .toLowerCase()用于区分大小写的字母
  • 如果需要实时更改,可以使用.on('input' , function(){....})代替.change()


可以使用jquery find方法的另一种方法
有关更多详细信息,请单击此处

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(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);
    }
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

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