搜索具有大量条目的HTML <select>列表</select>

时间:2015-03-20 15:09:15

标签: html select option

我对这里提到的问题有类似的问题。

HTML select tag autocomplete

我使用的网站上的列表有大量(~2,000)个条目。因此,当我突出显示一个选项并开始输入以查找我要查找的条目时,浏览器(Chrome)无法足够快地找到该选项。如果我试图找到一个名为“Apple&#39;”的条目,我会开始输入单词,列表会突出显示以&#39; A&#39;开头的条目,然后是另一个以&#39; P&#39;等等。它能够找到字符串(例如,以&#39; Ap&#39;开头的条目),但仅限于以非常特定的速度键入。

我的问题是,作为用户,是否有任何设置,浏览器或其他设置,我可以访问以允许我搜索此列表?也许要改变我需要键入的速度以搜索字符串。在Chrome的设置(和高级设置)中,似乎没有与此相关的设置。

感谢。

1 个答案:

答案 0 :(得分:0)

作为用户,没有太多可以做的事。您无权访问<select>元素的基础数据结构,因此浏览器必须一次搜索<option>个元素。

作为开发人员,诀窍是不要搜索<select>。相反,在首次加载框时,使用它作为原始数据来构建可搜索的数据结构,然后在其上运行搜索。搜索结果应包含<select>框中的相应索引,然后您只需选择该索引。

一个特里(不要与二叉搜索树混淆)可能适合这样的事情。在trie中的每个节点上,存储第一个<option>元素的索引,该元素的前缀与该点之前的字符串匹配。然后分支到与字符串中下一个字符对应的子节点。 jQuery成名的John Resig几年前与JavaScript tries做了一些工作。他在文本字典中使用它,但它应该适合这样的事情。