twitter typeahead jquery data source

Question

In my ASP.NET Core app I have a cshtml page where I am trying to use the Twitter Typeahead. Here is my markup:

<div id="type-ahead">
<input class="twitter-typeahead form-control" id="typeLocation" type="text" />
</div>

Here is my Javascript for the html input:

var substringMatcher = function (strs) {
        return function findMatches(q, cb) {
            var matches, substringRegex;

            // 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
            $.each(strs, function (i, str) {
                if (substrRegex.test(str)) {
                    matches.push(str);
                }
            });

            cb(matches);
        };
    };

    var locations = $.get('/Home/getlocationlist', function (data) {
    });

    $('#type-ahead .twitter-typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
        {
            name: 'locations',
            source: substringMatcher(locations)
        });

My question is pertaining to getting the data source for the typeahead. Here is my jQuery get:

var locations = $.get('/Home/getlocationlist', function (data) {});

This is my controller function that the $.get retrieves:

public ActionResult GetLocationList()
        {
            var list = ExecuteRows("SELECT LocationName FROM Location ORDER BY LocationName");
            var locations = list.SelectMany(x => x.Values);
            
            return Ok(locations);
        }

The $.get function return data and assigns it to location var. The problem is that the data comes back as an array looking like this

{["Location 1","Location 2","Location 3"]}

However, as I start typing, the typeahead starts to display multiple lines where each line shows the array noted above. I am trying to figure out how to properly process the data from the controller method into the typeahead.

Thank you!

Fei Han Fei Han · Accepted Answer · 2020-12-03T07:44:11

as I start typing, the typeahead starts to display multiple lines where each line shows the array noted above.

To fix above issue, please try to modify the code to put the code of initializing a typeahead inside Ajax success callback function, like below.

var substringMatcher = function (strs) {
    return function findMatches(q, cb) {
        var matches, substringRegex;

        // 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
        $.each(strs, function (i, str) {
            if (substrRegex.test(str)) {
                matches.push(str);
            }
        });

        cb(matches);
    };
};

$.get('/Home/getlocationlist', function (data) {
    var locations = data;

    $('#type-ahead .twitter-typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
        {
            name: 'locations',
            source: substringMatcher(locations)
        });
});

Test Result

twitter typeahead jquery data source

1 Answers