Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 298
kenji Avatar asked Feb 27 '14 05:02

kenji


People also ask

How to integrate Twitter typeahead with Vue?

We will integrate twitter typeahead with 3 simple steps: 1. Installation: Include twitter typeahead dependency in your package.json Then you can run npm install to install the needed dependencies. For this basic example, we’ll create a simple Vue component and then configure twitter-typeahead in it.

How to use call typeahead via JavaScript?

Usage of call typeahead via JavaScript is: where 'example' is the id of the input field on which you are applying typeahead. View the example live. You may use various options with typeahead. Here is list with detail: source: This is used to specify the data source containing values to be displayed when queried.

How to use typeahead and Bloodhound together in Vue JS?

We will initiate Typeahead and Bloodhound in the mounted () hook of Vue.js since this is where the DOM is completely built. – The first thing we did was setting up Bloodhound to fetch suggestions from the remote source. – Then, we setup Typeahead on the input element.

What is type ahead JS?

Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads. The typeahead.js library consists of 2 components: the suggestion engine, Bloodhound, and the UI view, Typeahead.


1 Answers

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
    }
});
like image 152
kenji Avatar answered Oct 08 '22 15:10

kenji