如何自动过滤 HTML 选择列表？答案

【问题标题】：How can I auto filter a HTML selectlist?如何自动过滤 HTML 选择列表？
【发布时间】：2010-09-16 05:26:07
【问题描述】：

我有一个包含很多（1000 多个）名称的 HTML 选择列表。我有一个 javascript，如果有人开始输入，它将选择第一个匹配的名称。此匹配查看项目的开头：

var optionsLength = dropdownlist.options.length;
  for (var n=0; n < optionsLength; n++)
  {
    var optionText = dropdownlist.options[n].text;
    if (optionText.indexOf(dropdownlist.keypressBuffer,0) == 0)
    {
      dropdownlist.selectedIndex = n;
      return false; 
    }
  }

客户希望有一个建议或自动过滤器：键入名称的一部分应该“找到”包含该部分的所有名称。我见过一些类似 Google Suggest 的选项，大多数使用 Ajax，但我想要一个纯 JavaScript 选项，因为无论如何都已经加载了选择列表。有人指点吗？

【问题讨论】：

那你就得拉出元素？-)

标签： javascript asp.net autosuggest autofilter

【解决方案1】：

改变

if (optionText.indexOf(dropdownlist.keypressBuffer,0) == 0)

到

if (optionText.indexOf(dropdownlist.keypressBuffer) > 0)

在optionText 中的任意位置查找dropdownlist.keypressBuffer。

【讨论】：

虽然这将选择第一个选项来包含按下的键，但它无法根据超过 1 次按键过滤结果。

【解决方案2】：

YUI 库有一个用于此类功能的库，称为 AutoComplete。

AutoComplete 的 DataSource 可以是本地 javascript 对象，如果您改变主意，也可以轻松切换到 Ajax。

YUI 组件具有相当多的功能，非常可定制。

编辑：我不确定您是否可以按照问题的要求使用选择框。有可能。

【讨论】：

虽然我对 jQuery 发誓，但这似乎是一个很好的解决方案。好读：stackoverflow.com/questions/176324/…

【解决方案3】：

我会设置一个缓存来将options 保存在我的select 中。而不是在select 中过滤options，我会清除select，并用匹配的options 重新填充它。

大量伪代码：

onLoad:
    set cache

onKeyPress:
    clear select-element
    find option-elements in cache
    put found option-elements into select-element

这是我写的一个小 POC，从另一个 select 中选择的内容中对 selects 进行过滤——效果将一堆选择链接在一起。

或许能给你一些想法：

function selectFilter(_maps)
{
    var map = {};


    var i = _maps.length + 1; while (i -= 1)
    {
        map = _maps[i - 1];


        (function (_selectOne, _selectTwo, _property)
        {
            var select = document.getElementById(_selectTwo);
            var options = select.options;
            var option = {};
            var cache = [];
            var output = [];


            var i = options.length + 1; while (i -= 1)
            {
                option = options[i - 1];

                cache.push({
                    text: option.text,
                    value: option.value,
                    property: option.getAttribute(_property)
                });
            }


            document.getElementById(_selectOne).onchange = function ()
            {
                var selectedProperty = this
                                       .options[this.selectedIndex]
                                       .getAttribute(_property);
                var cacheEntry = {};
                var cacheEntryProperty = undefined;


                output = [];

                var i = cache.length + 1; while (i -= 1)
                {
                    cacheEntry = cache[i - 1];

                    cacheEntryProperty = cacheEntry.property;

                    if (cacheEntryProperty === selectedProperty)
                    {
                        output.push("<option value=" + cacheEntry.value + " "
                        _property + "=" + cacheEntryProperty + ">" +
                        cacheEntry.text + "</option>");
                    }
                }

                select.innerHTML = output.join();
            };
        }(map.selectOne, map.selectTwo, map.property));
    }
}


$(function ()
{
    selectFilter([
        {selectOne: "select1", selectTwo: "select2", property: "entityid"},
        {selectOne: "select2", selectTwo: "select3", property: "value"}
    ]);
});

【讨论】：

【解决方案4】：

使用这个过滤器脚本 http://www.barelyfitz.com/projects/filterlist/

【讨论】：