multiple sources

typeahead multiple sources

Posted on: March 2nd, 2014 by taff No Comments

 

Today I would like to continue the series on by going into retrieving multiple sources with typeahead. I recently went into how to limit the results with typeahead. This example goes into getting more than one dataset into your result. As I mentioned in the first post, I have two types of data one that retrieves the searchterms other users have used and the other to find relevant products in a database so lets look at retrieving both sources with a single call.

Retrieving multiple sources with typeahead

The example below shows how to retrieve multiple sources with typeahead. To assist the user with seeing where to suggestions are coming from, we have added a header parameter which is displayed above the dataset thus increasing legibility.

jQuery('#Search').typeahead([
{
limit: 3,
name: 'searchterms',
remote: '/searchterms.php?q=%QUERY',
header: '<h3 class="suggest-elements">Search Terms</h3>'
},
{
limit: 5,
name: 'products',
remote: /products.php?q=%QUERY,
header: '<h3 class="suggest-elements">Products</h3>'
}
]);

Note that we can individually set the number of results when retrieving multiple sources with typeahead. The example above collects 3 results from the searchterms query and five results from the products query. The datasets are separated with the respective headers. In the next tutorial we will go into using a custom template to directly link to the products page. The searchterms dataset will functionally stay the same, so that it simply changes the input field upon selection and fires the query.