Update JSON on every keyup for twitter typeahead

Question

I have a html page with an input field. Every time something is typed in this field, there is a call done to a php script with jQuery.

This php script returns a JSON

Answer 1

What I ended up doing is to use Bloodhound and, specifically, replace to create an appropriate query:

var states = new Bloodhound({
    ...
    remote: {
            url: 'suggest.php?input=',
            replace: function (url, query) {
                    suggestion.input = query;
                    return url + suggestion.input;
            },
            ...
    }
});
states.initialize();

All together, the full code looks like this:

$(function(){

        var suggestion = {
                input: '',
                normalized: ''
        };
        var states = new Bloodhound({
                datumTokenizer: function (d){

                },
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                        url: 'get_names.php?input=',
                        replace: function (url, query) {
                                suggestion.input = query;
                                return url + suggestion.input;
                        },
                        filter: function (data) {
                                return $.map(data, function(company) { return { value: company }; });
                                }
                }
        });
        states.initialize();

        $('#the-basics .typeahead').typeahead({
                minLength: 1,
                highlight: true
                },{
                displayKey: 'value',
                source: states.ttAdapter()
        });
});

Answer 2

Edit, Updated

Try

    var substringMatcher = function () {
        return function findmatches(q, cb) {
            var matches, substrRegex;

            // an array that will be populated with substring matches
            matches = [];

            // regex used to determine if a string contains the substring `q`
            substrRegex = new RegExp(q, 'i');

            // iterate through the pool of strings and for any string that
            // contains the substring `q`, add it to the `matches` array

            // do ajax stuff
            // update remote `source` here
            $.post("/echo/json/"
                  // do stuff with `q` : `input`
                , {json:JSON.stringify([states, {input:q}])})
            .then(function(json) {
                var names  = json[1];
                console.log(names);
            $.each(json[0], function (i, str) {
                if (substrRegex.test(str)) {
                    // the typeahead jQuery plugin expects suggestions to a
                    // JavaScript object, refer to typeahead docs for more info
                    matches.push({
                        value: str
                    });
                }
              });

            cb(matches);
            } // `error` handler
            , function(jqxhr, textStatus, errorThrown) {
                console.log(textStatus, errorThrown)
            }); // end of `then`
        };

    };

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas'
                 , 'California','Colorado', 'Connecticut', 'Delaware'
                 , 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois'
                 , 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana'
                 , 'Maine', 'Maryland', 'Massachusetts', 'Michigan'
                 , 'Minnesota', 'Mississippi', 'Missouri', 'Montana'
                 , 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey'
                 , 'New Mexico', 'New York', 'North Carolina', 'North Dakota'
                 , 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island'
                 , 'South Carolina', 'South Dakota', 'Tennessee', 'Texas'
                 , 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia'
                 , 'Wisconsin', 'Wyoming'];

    $('#the-basics .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'categories',
        displayKey: 'value',
        source: substringMatcher()
    });

jsfiddle http://jsfiddle.net/guest271314/96d5mzr8/16/