Sort typeahead suggestions with the exact input at top

Question

I am using Twitter typeahead.js 0.10.5 as a suggestion engine. It works great, with one exception, I can't sort the list of suggestions the way I want.

As an example:

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

When I type "need" I do get the suggestions ordered by position in array, but I would like to have it ordered by input, meaning the order should be "need","needs","all I need"... When typing "he" it should be "he needs", "all he needs", "all I need" etc.

I know Bloodhound has a sorter option, but I don't know how to use it in this particular situation.

Answer 1

You want something along these lines. This will move the exact match to the top. You will want to continue modifying the sorter code to handle string case, whitespace, and how you want non perfect but close matches to be handled.This should get you started.

        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

To sort all matches by closeness to the input, you can take the Levenshtein distance of a and b. I just implemented this using fast-levenshtein and it works and performs great.

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