HTML SELECT 元素使用哪种算法在您键入时显示结果?
我正在尝试在 Flash (AS3) 中复制 HTML SELECT 元素(下拉列表或组合框)。
在大多数浏览器中,当您有一个焦点并键入某些内容时,组合框将尝试在其选项中查找值并显示最接近的值。我想知道使用什么样的算法来实现这一点。 我不认为它的 Levenshtein 或类似的,因为它只适用于字符串的开头。
我认为它的工作原理是保留已写入内容的缓冲区,并尝试找到以此开头的字符串...如果找不到任何内容,则会清除缓冲区,并搜索以最后一个开头的字符串字符被按下。
我已经对此进行了原型设计,并且它工作得很好,但有一个警告......在 HTML 中,当您重复按同一键时,它将在以该字符开头的所有选项之间旋转。我想我可以解决这个问题,但想知道是否有人已经这样做了,以比较算法......它变成了一个相当复杂的代码来测试和调试,而且我不确定我是否涵盖了所有可能性。 ..
I'm trying to replicate an HTML SELECT element (drop-down-list or combobox) in Flash (AS3).
In most browsers, when you have one in focus and you type something, the combobox will try to find the value within its options and show the closest one. I was wondering what kind of algorithm is used for that.
I don't think its Levenshtein or similar since it only works with the beginning of the string.
I'm thinking that it works by keeping a buffer of what has been written, and tries to find a string starting with that... if it doesn't find anything, it clears the buffer, and searches a string beginning with the last character pressed.
I already prototyped this, and it works quite ok, with one caveat... In HTML, when you repeatedly press the same key, it will rotate between all options starting with that character. I think I could fix this, but was wondering if someone has already done it, to compare the algorithms... its turning into quite a complex code to test and debug, and I'm not sure I'm covering all the possibilities...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
表单小部件对键盘交互的反应并不标准化,并且不同的浏览器也不一致。从脚本创建仿制品表单控件时,这始终是一个问题。
这个功能来自Windows并且相当不直观。确切的规则并不那么准确,相当模糊,并且在 IE 和 Opera 中与其他浏览器中给出不同的结果。
IMO 这种行为是非常不可取的。由于普通用户无法预测该规则的工作原理,因此我个人会将其省略,只需选择第一个选项来匹配输入的左字符串。这对您来说更容易编码,也更容易让用户理解。
The reaction of form widgets to keyboard interaction is not standardised and different browsers don't agree. This is always an issue when creating ersatz form controls from script.
This feature comes from Windows and is quite unintuitive. The exact rule isn't that exactly, is quite obscure, and gives different results in IE and Opera versus the other browsers.
IMO this behaviour is highly undesirable. Since no average user is going to be able to predict how the rule works, I personally would leave it out and simply select the first option to match the typed leftstring. This is easier for you to code and easier for the user to understand.
刚刚在 Firefox 上做了一些测试,我注意到(这不是官方信息,只是纯粹的猜测):
Key
按下事件:key
添加到缓冲区buffer.length == 1
ANDkey
与上次按下的键相同吗?key
开始的下一项。key
添加到buffer
并搜索以buffer
开头的下一项。这当然需要一个计时器。
Just did some tests on firefox, and I noticed (this is not official information, just pure speculation):
Key
pressed event:key
to bufferbuffer.length == 1
ANDkey
is same as last key pressed?key
.key
tobuffer
and search next item starting withbuffer
.This will need a timer of course.
我不知道浏览器中使用什么算法,但想到的一种可以满足您要求的算法是序列对齐或最长公共子序列算法。它将允许您将字符串的任何部分与字符串的任何其他部分进行匹配(匹配的子字符串之间可能存在间隙)。但它的速度并不是很快。
http://en.wikipedia.org/wiki/Sequence_alignment
还有一些非常好的讲座视频麻省理工学院在线开放课程
http://ocw.mit.edu/OcwWeb/Electrical-Engineering-and-Computer-Science/6-046JFall-2005/VideoLectures/detail/embed15.htm
I don't know what algorithm is used in the browsers but one that comes to mind that would do what you want is sequence alignment or a longest common subsequence algorithm. It would allow you to match any part of the string to any other part of the string (with possible gaps between the matched sub strings). It's not massively quick though.
http://en.wikipedia.org/wiki/Sequence_alignment
there's also some very good lecture videos online at MIT open course ware
http://ocw.mit.edu/OcwWeb/Electrical-Engineering-and-Computer-Science/6-046JFall-2005/VideoLectures/detail/embed15.htm
您可能希望在每次按键后重置到下拉列表的顶部,然后搜索附加的缓冲区。
You might want to reset to the top of the dropdown after every key press and then search for the appended buffer.