Search code examples
javascripttwittertypeahead.jstypeahead

Twitter Typeahead.js how to return all matched elements within a string


By default twitter typeahead.js returns only elements matched in the begining of a string, for example:

source: ['type','typeahead','ahead']

query: 'type'

returns: 'type' and 'typeahead'

--

query: 'ahead'

returns: 'ahead'

I want it to return 'ahead' and 'typeahead'

my code:

var clients = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
        url: '/clients.json',
        filter: function(list) {
            return $.map(list, function(value) { return { name: value }; });
        }
    }
});

clients.initialize();

$('.client').typeahead(null, {
    displayKey: 'value',
    source: clients.ttAdapter(),
    minLength: 1,
});

There is already a question about it but i didnt understand the answer.


Solution

  • I found a solution... the problem was that I was so used to bootstrap2 typeahead that I wasn't understanding the datumTokenizer thing. If someone else find it hard to understand, I will put a little description below:

    queryTokenizer: array of words you are querying, if you query for 'test abcd' it will transform the string into ['test','abcd'] and than look for matches with those two words.

    datumTokenizer : array of words it will be matched with queryTokenizer. Each item from your JSON will have a set of words to be matched.

    So if you have a source:

    ['good test','bad test']

    and query for 'est'. You need to make datumTokenizer return an array containing 'est' , something like:

    ['good','test','ood','od','test', 'est', 'st'] for the first item

    ['bad','ad','test', 'est', 'st'] for the second item

    Bellow is the code I wrote, I don't know if its the optimal thing for it, but I think it will help anyway:

    new Bloodhound({
        datumTokenizer: function(d) {
            var test = Bloodhound.tokenizers.whitespace(d.value);
                $.each(test,function(k,v){
                    i = 0;
                    while( (i+1) < v.length ){
                        test.push(v.substr(i,v.length));
                        i++;
                    }
                })
                return test;
            },
        queryTokenizer: Bloodhound.tokenizers.whitespace, 
        limit: 10,
        prefetch: {
            url: '/lista.json',
            ttl: 10000
        }
    });