HTML SELECT 元素使用哪种算法在您键入时显示结果?

发布于 2024-08-18 11:18:35 字数 505 浏览 8 评论 0原文

我正在尝试在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

错々过的事 2024-08-25 11:18:35

表单小部件对键盘交互的反应并不标准化,并且不同的浏览器也不一致。从脚本创建仿制品表单控件时,这始终是一个问题。

在 HTML 中,当您重复按同一键时,它将在以该字符开头的所有选项之间轮换。

这个功能来自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.

In HTML, when you repeatedly press the same key, it will rotate between all options starting with that character.

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.

夜巴黎 2024-08-25 11:18:35

刚刚在 Firefox 上做了一些测试,我注意到(这不是官方信息,只是纯粹的猜测):

  • Key 按下事件:
    • Esc(仅限 Firefox):清除缓冲区
    • 向上/向下箭头:在列表上向上/向下移动,清除缓冲区
    • 向上/向下翻页:在列表上向上/向下移动 20,清除缓冲区
    • 首页:移至列表顶部,清除缓冲区
    • End:移动到列表末尾,清除缓冲区
    • 其他:
      • 缓冲区为空?
        • 是:将key添加到缓冲区
      • buffer.length == 1 AND key 与上次按下的键相同吗?
        • 是:继续以 key 开始的下一项。
        • 否:将 key 添加到 buffer 并搜索以 buffer 开头的下一项。
  • 1.5 秒过去事件:清除缓冲区

这当然需要一个计时器。

Just did some tests on firefox, and I noticed (this is not official information, just pure speculation):

  • Key pressed event:
    • Esc (firefox only): clear buffer
    • Arrow up/down: move up/down on the list, clear buffer
    • Page up/down: move up/down by 20 on the list, clear buffer
    • Home: move to the top of the list, clear buffer
    • End: move to the end of the list, clear buffer
    • Other:
      • Empty buffer?
        • Yes: add key to buffer
      • buffer.length == 1 AND key is same as last key pressed?
        • Yes: go on next item starting with key.
        • No: add key to buffer and search next item starting with buffer.
  • 1.5 seconds passed event: clear buffer

This will need a timer of course.

糖果控 2024-08-25 11:18:35

我不知道浏览器中使用什么算法,但想到的一种可以满足您要求的算法是序列对齐或最长公共子序列算法。它将允许您将字符串的任何部分与字符串的任何其他部分进行匹配(匹配的子字符串之间可能存在间隙)。但它的速度并不是很快。

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

缱绻入梦 2024-08-25 11:18:35

在 HTML 中,当您重复按同一个键时,它将在以该字符开头的所有选项之间轮换。我想我可以解决这个问题,但想知道是否有人已经这样做了,以比较算法

您可能希望在每次按键后重置到下拉列表的顶部,然后搜索附加的缓冲区。

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

You might want to reset to the top of the dropdown after every key press and then search for the appended buffer.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文