typeahead

typeahead template function

Posted on: March 16th, 2014 by taff 2 Comments

 

Sometimes when using typeahead you need to retrieve different data which for example links to a particular page as opposed to carrying out a search. The typeahead template function is just the job for this, but let's have a look at the data first. In the following example I will be retrieving two types of data. If you need help with this, look into retrieving multiple sources with typeahead. The first data retrieved is the search suggest which I won't go into deeper as this example concentrates on using the typeahead template function.

The JSON data I retrieved by the call to products.php has the following structure (this would be the data retrieved when typing netbook into the searchbar:

[
{"product_id":"1","value":"Aspire Netbook"},
{"product_id":"2","value":"ASUS Netbook"},
{"product_id":"3","value":"Lenova Netbook"}
]

Nothing to difficult here. The idea is that the data retrieved can be used to generate a direct link to the product, saving the need for a user search. Using a general MVC standard, the url would be product/details/product_id where product is the controller, details the action within said controller and product_id would be the parameter passed to our action If I want to visit the ASUS Netbook page, I would go to product/details/2. Let's see how the typeahead template function can help us to achieve this.

jQuery(document).ready(function () {
jQuery('#Search').typeahead([
{
limit: 5,
name: 'searchterms',
remote: '/searchterms.php?q=%QUERY',
header: '
<h3 class="suggest-elements">Search Terms</h3>
'
},
{
limit: 3,
name: 'products',
remote: /products.php?q=%QUERY,
header: '
<h3 class="suggest-elements">Products</h3>
',
template: function (data) {
return '
<p class="searchSuggest-product"><a href="/product/details/' + data.product_id + '">' + data.value + '</a></p>
';
}
}
]);
});

As you can see, the typeahead template function is a simple callback function that is passed a data array and returns some HTML. Although typeahead offers the ability to use Handlebars or Hogan to compile the template, as you can see on the typeahead examples page, I find this version better as it saves me using an additional javascript libarary. I hope this short example helps you get to grips with the typeahead template function. Feel free to comment if anything is unclear or you need further assistance

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.

typeahead – Limit results

Posted on: February 28th, 2014 by taff No Comments

 

I recently started using twitters typeahead for search suggestions. Although it works well out of the box, there were a couple of things I wanted to change. Currently I have typeahead doing two requests, one that retrieves the searchterms other users have used and the other to find relevant products in a database, but to start let's look how to go about limiting the number of results.

Limiting the number of results with typeahead

By default, typeahead limits the number of results to 5. I, however, only wanted the 3 closest results. Limiting the number of results with typeahead is simply achieved using the limit parameter as can be seen in the typeahead example below

jQuery('#Search').typeahead([
{
limit: 3,
remote: '/searchterms.php?q=%QUERY',
name: 'searchterms'
}
]);

The example has three parameters, the limit parameter that tells typeahead how many results to display, the remote parameter which tells typeahead where to get the data from and name which tells typeahead the name of the dataset. The code above limits the results to three. As you can see limiting the number of results with typeahead is a breeze with the correct parameter.

This code needs to be placed inside a document ready function or an equivalent to ensure execution when the page has loaded. It goes without saying but you obviously need to make a script call to typeahead.min.js. In the example above typeahead adds some javascript magic to the input field with the ID Search.

Although not entirely related to limiting the number of results with typeahead, in addition to the remote parameter, there are other ways of retrieving data. For example, if you have a set amount of data that you want to be cached client side, you may want to look into the prefetch parameter. I hope you like this short example of limiting the number of results with typeahead. Look forward to a couple of other examples such as requesting more than one type of data and how to build a custom template without using hogan.