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

Question

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.

Orthodox

Answer 1

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

Orthodox

Consider var i = 0; for strict mode. Otherwise definitely +1. – Textualism

That's exactly what I was trying to do. – Clothespin

How we can search on multiple columns in the same dataNumTokenizer – Octavalent

Thanks, i was looking in the docs but i couldnt understand what datumTokenizer was and queryTokenizer – Eclectic

Works without having to fight with code, just change d.value to d.(whatever field you want to search) – Crotty

Can someone please help me .. I am not able to get this work. – Mckibben