CODEWITHSUNDEEP
jquerytypeahead.js
user1288906
user1288906

Reputation: 439

Typeahead.js - Populate dataset

I am using the Twitter typeahead.js header and the following is my code that works. However i would like to know if there was a way I could populate my dataset using a function instead of an array in local. Your help is much appreciated.

    <input id="look" placeholder="search" autocomplete="off" />
        <button id="btn">Submit</button>

        <script type="text/javascript">
            $("#look").typeahead({
                name: 'accounts',
//Would like to use a function to populate my dataset here instead of this array
                local: ['timtrueman', 'JakeHarding', 'vskarich']
            });

            $("#btn").click(function () {
                $("#look").typeahead('setQuery', 't');
                $("#look").focus();
            });

        </script>
</body>

Upvotes: 3

Views: 4130

Answers (2)

Jacques Snyman
Jacques Snyman

Reputation: 4290

This will be available in the upcoming release (v0.10.0).

See the source parameter under Sections in the version's readme on GitHub.

Extract from the readme:

A typeahead is composed of one or more sections. For simple use cases, one section will usually suffice. If however you wanted to build something like the search typeahead on twitter.com, you'd need multiple sections. Sections can be configured using the following options.

  • name – The name of the section. Defaults to a random number.

  • source – The backing data source for the section. Can be either a dataset or a function with the signature (query, cb). If the latter, cb is expected to be invoked with an array of datums that are a match for query. Required.

  • highlight – If true, when suggestions are rendered, pattern matches for the current query in text nodes will be wrapped in a strong element. Defaults to false.

  • templates – A hash of templates to be used when rendering the section.

    • empty – Rendered when 0 suggestions are available for the given query. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query.

    • header – Rendered at the top of the section. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query and isEmpty.

    • footer – Rendered at the bottom of the section. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query and isEmpty.

    • suggestion – Used to render a single suggestion. If set, this has to be a precompiled tempate. The associated datum object will serves as the context. Defaults to the value of the datum wrapped in a p tag.

Upvotes: 0

Hieu Nguyen
Hieu Nguyen

Reputation: 8623

Since local provides only static data, I think remote suits your need better:

$('#look').typeahead({
    name: 'accounts',
    remote: '/your/backend/url?q=%QUERY'
});

So typeahead will send AJAX request to /your/backend/url with parameter q with value is the value you type. Your backend should be able to return a response for that lookup request.

If you want to debug the response from your backend and process that data, use this:

$('#look').typeahead({
    name: 'accounts',
    remote: {
        url: '/your/backend/url?q=%QUERY',
        filter: function(resp) {
            var dataset = [];
            console.log(resp); // debug the response here

            // do some filtering if needed with the response          

            return dataset;
        }
    }
});

Hope it helps.

Upvotes: 1

Related Questions