Question

我使用Twitter typeahead.js 0.10.5作为建议引擎。它很有效，但有一个例外，我无法按照我想要的方式对建议列表进行排序。

举个例子：

            var data =[{"id":1,"value":"no need"},
                        {"id":2,"value":"there is no need"},
                        {"id":3,"value":"in the need of"},
                        {"id":4,"value":"all I need"},
                        {"id":5,"value":"need"},
                        {"id":6,"value":"needs"},
                        {"id":7,"value":"all he needs"},
                        {"id":8,"value":"he needs"},
                        {"id":9,"value":"they need"},
                        {"id":10,"value":"you need"}]

            var suggestion = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                local: data,
                limit: 20
              });

              suggestion.initialize();

              $('.typeahead').typeahead({
                hint: true,
                autoselect: true,
                highlight: true,
                minLength: 1
              },
              {
                name: 'suggestion',
                displayKey: 'value',
                source: suggestion.ttAdapter(),
                templates: {
                empty: [
                  '<div class="empty-message">',
                  'no suggestion in this map',
                  '</div>'
                ].join('\n'),
                suggestion: Handlebars.compile('<p><span class="suggestion-text">{{value}}</span></p>')
              }

当我输入＆＃34;需要＆＃34;我确实通过数组中的位置获得了建议，但我希望按输入顺序排列，这意味着订单应该是＆＃34;需要＆＃34;，＆＃34;需要＆＃34;，＆＃34;所有我需要＆＃34; ...当打字＆＃34;他＆＃34;它应该是＆＃34;他需要＆＃34;，＆＃34;他需要的所有＆＃34;，＆＃34;我需要的所有＆＃34;等

我知道Bloodhound有一个分拣机选项，但我不知道在这种特殊情况下如何使用它。

Answer 1

你想要这些方面的东西。这会将完全匹配移到顶部。您将需要继续修改排序器代码以处理字符串大小写，空格以及您希望如何处理非完美但匹配的匹配。这应该让您开始。

        var suggestion = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            local: data,
            limit: 20,
            sorter:function(a, b) { 

                     //get input text
                 var InputString=   $(Selector).val();

                     //move exact matches to top
                 if(InputString==a.value){ return -1;}
                 if(InputString==b.value){return 1;}

                      //close match without case matching
                 if(InputString.toLowerCase() ==a.value.toLowerCase()){ return -1;}
                 if(InputString.toLowerCase()==b.value.toLowerCase()){return 1;} 

                 if( (InputString!=a.value) && (InputString!=b.value)){

                      if (a.value < b.value) {
                         return -1;
                      }
                      else if (a.value > b.value) {
                         return 1;
                      }
                      else return 0;
                 }
              },
          });

Answer 2

要靠近输入对所有匹配进行排序，您可以a b和sorter: function(a, b) { var input_string = $(selector).val(); return levenshtein.get(a.key, input_string) - levenshtein.get(b.key, input_string); }。我刚刚使用Levenshtein distance实现了它，它的工作原理很棒。

{{1}}

使用顶部的确切输入对typeahead建议进行排序

2 个答案: