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.
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.
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.
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.
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.
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
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With