Search code examples
typeahead.jsbloodhound

Typeahead/Bloodhound turn results into links


I'm following this one http://twitter.github.io/typeahead.js/examples/#multiple-datasets and then got it working using remote, retrieving data from database. Now I want to make the results into links like when you click to a result it will redirect to another page named view.php?id=# with the id. How to do that?

Update1: So I tried Handlebars and I don't know why it's not working. Below is my code. I didn't mind about the id yet because my code didn't work. I tested the name first.

var searchResult = new Bloodhound({
        datumTokenizer: function (d) {
        return Bloodhound.tokenizers.whitespace(d.name);
       },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: 'data.php?q=%QUERY',
            filter: function (results) {
                return $.map(results, function (result) {
                    return {
                       name: result.cl_fname
                    };
                });
            }
        }
    });

    searchResult.initialize();

    $('#multiple-datasets .typeahead').typeahead({
    hint: true,
    highlight: true
    },
    {
        name: 'cl-name',
        displayKey: 'name',
        source: searchResult.ttAdapter(),
        templates: {
        empty: [
            '<div class="empty-message">',
            'Cannot find.',
            '</div>'
        ].join('\n'),
        suggestion: Handlebars.compile('<p><strong>{{name}}</p>')
        }
    });

Solution

  • I got it working now. I didn't know Handlebars was a different library so I figured it out and downloaded it.