Guide on using Twitter Typeahead.js to capture all matching elements in a specific string

Question

Guide on using Twitter Typeahead.js to capture all matching elements in a specific string

When using twitter typeahead.js, it typically returns elements that match only at the beginning of a string. For example:

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

query: 'type'

Returns: 'type' and 'typeahead'

--

query: 'ahead'

Returns: 'ahead'

However, I would like it to also return 'ahead' and 'typeahead'

This is the code I have written for it:

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

I have found a similar question regarding this issue, but the answer provided was difficult for me to understand.

javascript twitter typeahead.js typeahead

Answer 1

Answer №1

I managed to solve the issue by realizing that my familiarity with bootstrap2 typeahead was hindering my understanding of the datumTokenizer. For those who may be struggling to grasp it, here is a brief explanation:

queryTokenizer: This is an array of words that you are searching for. For example, if you search for 'test abcd', it will break down the string into ['test','abcd'] and then identify matches based on these words.

datumTokenizer: This is an array of words that will be compared with the queryTokenizer. Each JSON item will have its own set of words to compare against.

For instance, if you have a data source like:

['good test','bad test']

and you search for 'est', your datumTokenizer should return an array containing 'est'. Here's how it could look:

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

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

Below is the code I came up with. It may not be the most efficient solution, but I believe it can still be helpful:

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

Answer 2

I managed to solve the issue by realizing that my familiarity with bootstrap2 typeahead was hindering my understanding of the datumTokenizer. For those who may be struggling to grasp it, here is a brief explanation:

queryTokenizer: This is an array of words that you are searching for. For example, if you search for 'test abcd', it will break down the string into ['test','abcd'] and then identify matches based on these words.

datumTokenizer: This is an array of words that will be compared with the queryTokenizer. Each JSON item will have its own set of words to compare against.

For instance, if you have a data source like:

['good test','bad test']

and you search for 'est', your datumTokenizer should return an array containing 'est'. Here's how it could look:

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

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

Below is the code I came up with. It may not be the most efficient solution, but I believe it can still be helpful:

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

Guide on using Twitter Typeahead.js to capture all matching elements in a specific string

Answer №1

Similar questions

When implementing the Dropdown Picker, it is important to avoid nesting VirtualizedLists inside plain ScrollViews for optimal

Expand the clickable area of the checkbox

Finding the text within a textarea using jQuery

Creating a function that allows for the dynamic addition of rows in Angular with

sequentially animating elements using animate css in a choreographed manner

Issue encountered while attempting to set up react-native project

Tips for creating a window closing event handler in Angular 2

Is it possible to incorporate async await with SetState in React?

Storing the result of parsing JSON data into a global variable

The code functions properly within the emulator, however, it fails to execute on an actual device

JavaScript interval setting multiples

Guide on implementing a personalized 'editComponent' feature in material-table

Having trouble resolving this issue: Receiving a Javascript error stating that a comma was expected

Having trouble processing the Firebase snapshot with Node.js

Tips on choosing filters and leveraging the chosen value for searching in a Vue application

Encountering a User Agent error while trying to update Vue to the latest version using N

Guide on generating virtual nodes from a string containing HTML tags using Vue 3

Leveraging the power of Framer Motion in combination with Typescript

The search for the view in the directory "/views" was unsuccessful in Express 4.0

Having issues with my toggler functionality. I attempted to place the JavaScript CDN both at the top and bottom of the code, but unfortunately, it is still not