CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3typeahead.js
ryan
ryan

Reputation: 33

typeahead.js search from beginng

I have a catalog of products that I download after the user initializes the application. I want to be able to search the catalog using twitter's typeahead. The basic code is as follows:

$.post($("#ProductSearch").data("url"), function(res) {
    $("#ProductSearch").typeahead({
        name: 'Products',
        local: _.values(res),
    })
})

So far this works great but, I would like to show results matching what the user types first. For example, I type: "SB", I am getting the following 10 results:

I would like to get the following matches first...

Everything I have found when searching seems like it is for bootstrap 2.x's "typeahead" component, I am implementing the latest https://github.com/twitter/typeahead.js and http://getbootstrap.com

Thank you in advance. :)

Upvotes: 2

Views: 2926

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

The typeahead.js don't allow a filter on a local dataset as i understood. See the first example on http://twitter.github.io/typeahead.js/examples/ (country search) The result are the first 10 (depeding on your limit) result matching your query. Dataset for this example is here: http://twitter.github.io/typeahead.js/data/countries.json

Matching is done by finding your query a the start of a single word:

Search for "a" will have "United Arab Emirates" listed second, cause it is the second entry in your dataset where "arab" starts with an "a". So will "hon" match "Hong Kong", but "ong" don't have a match. "rael" don't match "Israel" etc. NOTE in your case "WC2430L-SB" will be split in two 'single' words "WC2430L" and "SB" which match "sb".

When you apply a filter on your local dataset like local: filter(_.values(res)), filter will only be applied on initialization and not on every search / input.

In your case you will need the remote option, like: remote: '../data/films/queries/%QUERY.json',. Your database came from $("#ProductSearch").data("url") so you will use this url as your remote parameter.

In the case that $("#ProductSearch").data("url") is http://www.yourdomain.com/database you should code something like:

    <input class="typeahead" type="text" placeholder="products">

    $('.typeahead').typeahead({                                
        remote: 'http://www.yourdomain.com/database?q=%QUERY'
        limit: 10                                                                   
        });

Where http://www.yourdomain.com/database?q=%QUERY should return a list of data, see: https://github.com/twitter/typeahead.js

The individual units that compose datasets are called datums. The canonical form of a datum is an object with a value property and a tokens property. value is the string that represents the underlying value of the datum and tokens is a collection of single-word strings that aid typeahead.js in matching datums with a given query.

These data should be json encode and contains or start with values with having your %QUERY at the begin.

In the case you can't manipulate the results of http://www.yourdomain.com/database you could write a local filter for it.

Example: http://www.yourdomain.com/database ($("#ProductSearch").data("url")) seems to return an (json) object cause you use _.values on it.

This will mimic your database in php (availible on http://testdrive/database.php in my case), database.php:

<?php
$values = array('WC2430L-SB','WC2430R-SB','WC2730L-SB',
'SBB24','SBB27','SBB30','SBB33','SBB36','WC2730R-SB','WC3030L-SB');
echo json_encode((object)$values);

And the filter filter.php:

<?php
function filter($value)
{
    return (boolean)preg_match('/^'.$_GET['q'].'/i',$value);
}   
$values = (array)json_decode(file_get_contents('http://testdrive/database.php'));
$values = array_filter($values, "filter");
echo json_encode((object)$values);

Now you could use:

        $('.typeahead').typeahead({ 
        name: 'Products',                                   
        remote: 'filter.php?q=%QUERY'
        limit: 10                                                                   
        });

Now your dropdown will only contain results which start with your input. In stead of the local option remote is not static the remote url is called for every input again.

Upvotes: 1

Related Questions