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

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>')
              }

当我输入"need"时,我确实按照数组中的位置获得了建议,但是我想通过输入来命令它,这意味着顺序应该是"需要","需要","我需要的所有"......当输入"他"应该是"他需要","他需要的一切","我需要的一切"等.

我知道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

要通过贴近输入的所有比赛进行排序,你可以采取Levenshtein距离的a和b.我刚刚使用fast-levenshtein实现了它,它的工作原理和性能都很好.

        sorter: function(a, b) {
            var input_string = $(selector).val();
            return levenshtein.get(a.key, input_string) - levenshtein.get(b.key, input_string);
        }