Question

我有一些值的选择。当用户在搜索框中输入车辆时，下拉菜单会过滤到搜索框中匹配的选项值。我能够让代码的第一部分工作，但我遇到的问题是，我将如何保存在下拉列表中过滤的选项值，以便它成为列表中的第一个选项。让我们例如错误地说用户点击退格按钮，因为如果发生这种情况，则不再选择所选的选项值，并且选项值默认返回到下拉列表中的第一个选项。我想要保存我必须使用cookie的价值，在这部分完全丢失，任何建议都会有所帮助。谢谢！必须能够在IE5和Up中工作：/ ＆lt; input type =“text”id =“searchFilter”placeholder =“Search”onkeyup =“FilterItems（this.value）;” /＆GT; ＆lt; select id =“ddVehicles”＆gt; ＆lt; option value =“1”＆gt; BMW＆lt; / option＆gt; ＆lt; option value =“2”＆gt; Mercedes-Benz＆lt; / option＆gt; ＆lt; option value =“3”＆gt; Bentley＆lt; / option＆gt; ＆lt; option value =“4”＆gt;兰博基尼＆lt; / option＆gt; ＆LT; /选择＆GT; var ddlText，ddlValue，ddl; function CacheItems（）{ ddlText = new Array（）; ddlValue = new Array（）; ddl = document.getElementById（“ddVehicles”）; for（var i = 0; i＆lt; ddl.options.length; i ++）{ ddlText [ddlText.length] = ddl.options [i] .text; ddlValue [ddlValue.length] = ddl.options [i] .value; } } window.onload = CacheItems; function FilterItems（value）{ ddl.options.length = 0; for（var i = 0; i＆lt; ddlText.length; i ++）{ if（ddlText [i] .toLowerCase（）。indexOf（value）！= -1 || ddlText [i] .toUpperCase（）。indexOf（value）！= -1）{ AddItem（ddlText [i]，ddlValue [i]）; } } } function AddItem（text，value）{ var opt = document.createElement（“option”）; opt.text = text; opt.value = value; ddl.options.add（优化）; }

Answer 1

您可以将选项元素放入输入的数据属性中：

var select = document.getElementById("ddVehicles");
var selOption = select.options[select.selectedIndex]
document.getElementById('searchFilter').dataset.selOption = selOption

或者你可以存储选项元素的索引，文本甚至outerHTML，无论你需要什么。

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes。

Answer 2

IE 5，哇。该浏览器在网络上完全失效，所以我假设这是为了完成家庭作业。将代码发布为可运行的代码段会更好，这样就可以在SO中播放。

我建议缓存选项，而不是重新创建它们，并使用全部小写（或者如果您愿意，可以使用上层）进行测试，以增加匹配的机会。如果搜索字段为空，则将选择恢复为其原始状态。

哦，惯例是以大写字母开头的变量名是构造函数。

E.g。

＆＃13;

var optionsCache = [];

function filterItems(el) {
  var value = el.value.toLowerCase();
  var form = el.form;
  var opt, sel = form.ddVehicles;
  if (value == '') {
    restoreOptions();
  } else {
    // Loop backwards through options as removing them modifies the next
    // to be visited if go forwards
    for (var i=sel.options.length-1; i>=0; i--) {
      opt = sel.options[i];
      if (opt.text.toLowerCase().indexOf(value) == -1){
        sel.removeChild(opt)
      }
    }
  }
}

// Restore select to original state
function restoreOptions(){
  var sel = document.getElementById('ddVehicles');
  sel.options.length = 0;
  for (var i=0, iLen=optionsCache.length; i<iLen; i++) {
    sel.appendChild(optionsCache[i]);
  }
}


window.onload = function() {
  // Load cache
  var sel = document.getElementById('ddVehicles');
  for (var i=0, iLen=sel.options.length; i<iLen; i++) {
    optionsCache.push(sel.options[i]);
  }
}

＆＃13;

<form>
  <input type="text" id="searchFilter" name="searchFilter" placeholder="Search" 
   onkeyup="filterItems(this);">
  <select id="ddVehicles" name="ddVehicles" size="4">
    <option value="1">BMW</option>
    <option value="2">Mercedes-Benz</option>
    <option value="3">Bentley</option>
    <option value="4">Lamborghini</option>
  </select>
</form>

＆＃13;

我认为以上应该适用于IE 5，我认为它有 getElementById 。如果没有，您可以使用document.forms[0].elementName引用表单控件。

Answer 3

通过使用“匹配”获得更好，更快的版本

    function filter() {
        var keyword = document.getElementById("search").value;
        var select = document.getElementById("select");
        for (var i = 0; i < select.length; i++) {
            var txt = select.options[i].text;
            if (!txt.match(keyword)) {
                $(select.options[i]).attr('disabled', 'disabled').hide();
            } else {
                $(select.options[i]).removeAttr('disabled').show();
            }

        }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>
        <input type="text" id="search" name="search" style="margin: 10px;width: 165px;" onkeyup="filter()">
    </div>
    <div>
        <select id="select" size="10" style="margin: 10px; width: 165px;height: 170px;">
            <option>Cupcake</option>
            <option>Cunut</option>
            <option>Eclair</option>
            <option>Froyo</option>
            <option>Gingerbread</option>
            <option>Honeycomb</option>
            <option>Ice Cream Sandwich</option>
            <option>Jelly Bean</option>
            <option>KitKat</option>
            <option>Lollipop</option>
            <option>Marshmallow</option>
            <option>Nougat</option>
        </select>
    </div>
</div>

使用javascript过滤<select>的选项？

3 个答案: