twitter typeahead jquery 数据源

Question

在我的 ASP.NET Core 应用程序中，我有一个 cshtml 页面，我在其中尝试使用 Twitter Typeahead。 这是我的标记：

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

这是我用于 html 输入的 Javascript：

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)
        });

我的问题是关于获取预先输入的数据源。这是我的 jQuery 获取：

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

这是 $.get 检索到的我的控制器函数：

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

$.get 函数返回数据并将其分配给位置 var。问题是数据以数组的形式返回，看起来像这样

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

但是，当我开始输入时，预输入开始显示多行，其中每行显示上述数组。 我正在尝试弄清楚如何将控制器方法中的数据正确处理到预输入中。

谢谢！

Answer 1

当我开始输入时，预输入开始显示多行，其中每行显示上述数组。

要解决上述问题，请尝试修改代码，将初始化一个typeahead的代码放在Ajax成功回调函数中，如下所示。

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)
        });
});

测试结果