Javascript 如何自动筛选HTML选择列表？

我有一个HTML选择列表，其中有很多（1000+个）名称。我有一个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; 
    }
  }

var optionsLength=dropdownlist.options.length；
对于（变量n=0；n

客户希望有一个建议或自动筛选：键入名称的一部分应“查找”包含该部分的所有名称。我已经看到了一些Google的类似于建议的选项，大多数使用Ajax，但是我想要一个纯javascript选项，因为选择列表已经加载了。有人给我指路吗？

改变

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

到

---

要查找

dropdownlist.keypressBuffer

在

optionText

中的任何位置，我将设置一个缓存来保存我的

中的
选项。而不是在
选择中过滤
选项
，我将清除
选择
，并用匹配的
选项重新填充它

大量伪代码：

onLoad:
    set cache

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

这是我写的一个小POC，从另一个
select
中选择的内容对
选择进行过滤，实际上是将一组选择链接在一起

也许它能给你一些想法：

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"}
    ]);
});

函数选择过滤器（\u映射）
{
var-map={}；
var i=_maps.length+1；while（i-=1）
{
map=_-map[i-1]；
（函数（\u selectOne、\u selectTwo、\u属性）
{
var select=document.getElementById（_selectTwo）；
var options=select.options；
var选项={}；
var缓存=[]；
var输出=[]；
变量i=options.length+1；而（i-=1）
{
期权=期权[i-1]；
cache.push({
text:option.text，
value:option.value，
属性：option.getAttribute（_属性）
});
}
document.getElementById（_selectOne）.onchange=function（）
{
var selectedProperty=this
.options[此.selectedIndex]
.getAttribute（_属性）；
var cacheEntry={}；
var cacheEntryProperty=未定义；
输出=[]；
变量i=cache.length+1；而（i-=1）
{
cacheEntry=cache[i-1]；
cacheEntryProperty=cacheEntry.property；
如果（cacheEntryProperty===selectedProperty）
{
output.push（“”）+
cacheEntry.text+“”）；
}
}
select.innerHTML=output.join（）；
};
}（map.selectOne，map.selectTwo，map.property））；
}
}
$（函数（）
{
选择过滤器([
{selectOne:“select1”，selectTwo:“select2”，property:“entityid”}，
{selectOne:“select2”，selectTwo:“select3”，property:“value”}
]);
});
YUI库有一个用于此类功能的库，名为

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

YUI组件具有相当多的功能，可以定制

编辑：我不确定你是否能让它按照问题的要求使用选择框。可能是可能的。
使用此筛选脚本
那么您必须提取元素？-）尽管我对jQuery发誓，这似乎是一个好的解决方案。良好阅读：虽然这将选择第一个选项来包含按下的键，但它无法根据超过1次的按键过滤结果。
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"}
    ]);
});