我可以降低dijit / form / FilteringSelect的拘束力嗎？

Question

一段時間以來，我對Dijit的FilteringSelect小部件的工作方式不滿意，並一直在嘗試使用Dojo 1.10進行改進，以針對我的用例進行改進。 不幸的是，似乎沒有任何設置組合是正確的，主要是因為它們不能一起使用。

• 設置queryExpr: '*${0}*'很好，但是它會使自動完成變得笨拙。
• 設置autoComplete: true是很好的，只要您要從頭開始輸入整個文本，直到找到匹配項即可。 不幸的是，如果您想從中間的某個地方開始，那將成為屁股上的痛苦。 當然，您可以將searchDelay: N設置為足以捕獲您所有鍵入內容的值，但是一旦您讓它在菜單中返回增量結果，BAM就可以繼續鍵入並可能在單詞中的其他地方結束匹配窗外。

我真正想要的是可以完成的事情，就像模糊查找器在shell或體面的文本編輯器（例如fzf ）中所做的一樣 。 這樣的查找器會跳過中間字符，基本上將您的輸入按字符分開，並在它們之間添加隱式通配符。 您一直鍵入直到第一個匹配項是您想要的匹配項，然后結束查找器並讓它替換值。

我開始弄亂實現此方法的方法，但是並沒有走太遠。 我曾考慮過劫持_patternToRegExp() ，但很快發現我的商店（帶有一些JSON數據的dojo/data/ItemFileReadStore實例）設置了_oldAPI標志， 並且從未執行過 。 我很高興更新商店，但是對我來說，這並不容易。 黑客入侵我的商店后，事情變得一發不可收拾，我決定采用一種較少參與但更加駭人聽聞的方法。

如果關閉自動完成功能並設置選項以在單詞中間進行匹配，則結果列表將非常接近所需的內容。 之后他們足夠的投入來獲得比賽，他們客場標簽之前鍵入剩下的為用戶做的是打不下來一次。 然后，問題就變成了如何避免需要這種手動干預並變得更加寬容。

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()函數似乎是使小部件在您單擊或單擊時默認為第一個匹配項的正確位置，但我不知道如何從菜單中實際使用第一個匹配項。

如何通過自動完成最佳匹配來獲得更強大的模糊搜索？ 我不需要ComboBox，該值必須最終成為我的JSON數據集中的值之一。 同時，我希望輸入選項比從頭輸入值或必須手動選擇匹配項更加草率。

Answer 1

也許為您的onBlur解決方法/解決方案：

設置queryExpr =“ \\ $ {0} ”不延遲並自動完成關閉

在filterSelect的onkeyup上，您將彈出匹配中的第一個值存儲在某個位置，然后在onblur之后將您的filterselected的displayValue / value更改為第一個彈出式窗口中的值（如果找到並匹配...）

要從彈出窗口中獲取第一個值：

第一個顯示的值可以在

ID為= YOUR_FILTERING_SELECT_ID +“ _popup0”的元素

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

如果該元素存在，則將innerHTML存儲在某個位置（隱藏元素或var ...）

調整innerHTML中的值以匹配商店中的值：

從您從innerHTML獲得的值中，刪除其中的span元素，使其與您的數據存儲區的值之一匹配

如果您的過濾器中的id =“ mySearchField”，並且正在搜索“ 123”，並且彈出窗口中的第一個匹配項顯示“ test 123 number”，則第一個彈出窗口中的innerHTML值將如下所示

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

因此，一點點的String塗鴉（只需從innerHTML值中刪除span標簽），您將獲得一個與onblur之后的第一個結果相匹配的值。