javascript - 我可以让 dijit/form/FilteringSelect 不那么挑剔吗？

Question

我对方式一直不满意Dijit's FilteringSelect widget 已经工作了一段时间，并且一直在使用 Dojo 1.10 进行修补，试图针对我的用例改进它。不幸的是，似乎没有一个设置组合是完全正确的，主要是因为它们不能一起工作。

• 设置 queryExpr: '*${0}*' 很好，但它会使自动完成变得疯狂。
• 只要您想从头开始输入整个文本直到找到匹配项，设置 autoComplete: true 就很好。不幸的是，如果你想从中间的某个地方开始，那就会很痛苦。当然，您可以将 searchDelay: N 设置为足够大的值来捕获您的所有输入，但是一旦您让它在菜单中返回增量结果，您就可以继续输入，并可能最终得到单词中其他位置的匹配项将被排除在外。

我真正想要的是像 shell 或像样的文本编辑器中的模糊查找器一样完成的东西(例如 fzf )。此类查找器会跳过中间字符，基本上按字符分割输入并在它们之间添加隐式通配符。您继续输入，直到第一个匹配项是您想要的，然后结束查找器并让它替换该值。

我开始尝试一种方法来实现这一点，但没有取得多大进展。我想过劫持_patternToRegExp() ，但很快发现我的商店(带有一些 JSON 数据的 dojo/data/ItemFileReadStore 实例)设置了 _oldAPI 标志和 that never gets executed 。我很高兴更新商店，但对我来说这并不容易让这变得更容易。对我的商店进行黑客攻击，事情逐渐失控，我决定采取较少参与但更黑客的方法。

如果您关闭自动完成并设置选项以在单词中间进行匹配，您将得到一个非常接近所需结果的结果列表。用户剩下要做的就是在输入足够的输入以获取匹配项后、在 Tab 离开之前按 Down 一次。接下来的问题就变成了如何避免需要这种手动干预并变得更加宽容。

define(["dijit/form/FilteringSelect"], function(FilteringSelect){
return declare("alerque.FuzzyFilter", [FilteringSelect], {
    autoComplete: false,
    highlightMatch: 'all',
    ignoreCase: true,
    queryExpr: '*${0}*',
    searchDelay: 0,

    _patternToRegExp: function(qs) {
        // If this ever actually got called, maybe we could
        // return qs split with wild cards between all characters
        return this.inherited(arguments);
    },

    onblur: function() {
        this._autoCompleteText(this.get('displayedValue'));
        // Pick first match from menu
        return this.inherited(arguments);
    }
})});

劫持 onblur() 函数似乎是制作一个小部件的正确位置，如果您按 Tab 或单击，该小部件默认为第一个匹配项，但我不知道如何实际使用菜单中的第一个匹配项。

我应该如何通过自动完成最佳匹配来获得更强大的模糊搜索？我不需要 ComboBox，该值最终必须成为我的 JSON 数据集中的值之一。同时，我希望输入选项比从头开始输入值或手动选择匹配项要简单得多。

Answer 1

也许是您的 onBlur 的解决方法/解决方案:

设置queryExpr="\${0}"无延迟且自动完成功能关闭

在过滤选择的 onkeyup 上，您将弹出窗口匹配的第一个值存储在某处，然后在 onblur 将过滤选择的显示值/值更改为第一个弹出窗口中的值(如果找到并匹配...)

要从弹出窗口中获取第一个值:

第一个显示的值可以在 id = YOUR_FILTERING_SELECT_ID + "_popup0"

的

元素中找到

因此，如果您的 id =“mySearchData”，则查找 id“mySearchData_popup0”

如果该元素存在，则将innerHTML存储在某处(隐藏元素或var ...)

调整innerHTML 中的值以匹配商店中的值:

根据从innerHTML 获得的值，从中删除span 元素，使其与数据存储区的值之一匹配

如果您的过滤 ID select = "mySearchField"并且您正在搜索“123”并且弹出窗口中的第一个匹配项显示“test 123 number”那么第一个弹出窗口的innerHTML值将如下所示

<li id="mySearchField_popup0" class="dijitReset dijitMenuItem" role="option">
test 
<span class="dijitComboBoxHighlightMatch">123</span>
number
</li>

因此，进行一点字符串涂鸦(只需从innerHTML值中删除span标签)，您将得到一个与onblur之后的第一个结果相匹配的值。