我有一个包含很多(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选项,因为选择列表已经加载了。指点任何人?
答案 0 :(得分:2)
更改
if (optionText.indexOf(dropdownlist.keypressBuffer,0) == 0)
到
if (optionText.indexOf(dropdownlist.keypressBuffer) > 0)
在dropdownlist.keypressBuffer
。
optionText
答案 1 :(得分:2)
我会设置一个缓存来保存options
内的select
。而不是在options
中过滤select
,我会清除select
,并使用匹配的options
重新填充它。
伪代码丰富:
onLoad:
set cache
onKeyPress:
clear select-element
find option-elements in cache
put found option-elements into select-element
这是我写的一个小POC,根据selects
中选择的内容对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"}
]);
});
答案 2 :(得分:2)
YUI库有一个用于此类功能的库,名为AutoComplete。
AutoComplete的DataSource可以是本地javascript对象,如果你改变主意,可以很容易地切换到Ajax。
YUI组件非常可定制,具有相当多的功能。
编辑:我不确定你是否可以按照问题的要求使用选择框。可能。
答案 3 :(得分:1)