typeahead callback not working

Question

I'm fairly new to Typeahead and cannot make it to work with callback. Sorry if this already has been asked, I cannot find an exact issue when I searched.

I had Typeahead working if the records are just coming from a variable with strings, but not when it is coming from the database. I'm not sure how I can code the callback correctly.

We are using MVC 6, and looks like this is typeahead.js 0.11.1.

WHAT WORKS:

var records = [ "Alabama", "Alaska", "Arizona" . . .];

var substringMatcher1 = function (records) {
    return function findMatches(searchString, callback) {

        var matches, substringRegex;
        matches = [];
        substrRegex = new RegExp(searchString, 'i');

        $.each(records, function (index, record) {
            if (substrRegex.test(record)) {
                matches.push(record);
            }
        });

        callback(matches);
    };
};

$('#field1').typeahead({
    hint: true,
    highlight: true,
    minLength: 3
},
{
    name: 'records',
    source: substringMatcher1(records)
});

WHAT DOES NOT WORK:

var substringMatcher2 = function (records) {
    return function findMatches(searchString, callback) {

        $.ajax({
            url: "/Test/GetRecords/",
            cache: false,
            data: { searchString: searchString },
            type: "POST",
            success: function (data) {

                callback(data);  
            },
            error: function (reponse) {
                alert("error : " + reponse);
            }
        });
    };
};

$('#field2').typeahead({
    hint: true,
    highlight: true,
    minLength: 3
},
{
    name: 'records2',
    source: substringMatcher2()
});

Test/GetRecords correctly returns the filtered records (List of strings) based on the searchString, but nothing is displayed on the page. I debugged and data is correctly populated. (data = [New Jersey, New York, . . . ] when searchString is "new")

What am I missing? And is this scenario possible to work?

Any help will be greatly appreciated.

Thanks in advance!

See http://stackoverflow.com/questions/27347121/update-json-on-every-keyup-for-twitter-typeahead — guest271314, Apr 05 '16 at 05:45
guest271314. thanks for the links. I looked at most answers and it seems I'm doing something similar, so I do not really know exactly why it's not working. Can you point me to a particular answer that you think will help? — niki b, Apr 05 '16 at 05:59
`callback` expects an array of object having `value` property with value being an individual search result — guest271314, Apr 05 '16 at 06:11
gues271314. what worked for me was to use the async source parameters. I changed it to "findMatches(searchString, processSync, processAsync" and changed "callback(data" to "processAsync(data)" and it worked! thanks a lot! — niki b, Apr 05 '16 at 06:15

score 2 · Accepted Answer · answered Apr 05 '16 at 06:18

This is the updated code that made it work for me, in case it helps somebody else:

var substringMatcher2 = function (records) {
return function findMatches(searchString, processSync, processAsync) {

    $.ajax({
        url: "/Test/GetRecords/",
        cache: false,
        data: { searchString: searchString },
        type: "POST",
        success: function (data) {

            processAsync(data);  
        },
        error: function (reponse) {
            alert("error : " + reponse);
        }
    });
};

};

typeahead callback not working

1 Answers1