Typeahead 不工作：当我输入时不显示 typeahead 建议

Question

我关注了typeahead documentation example: The Basics。当我 copy/pasted 来自 'The Basics' 的示例代码时它起作用了。我所改变的只是我做了一个 ajax 请求来代替那个静态数组。

代码：

var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
        var matches, substringRegex;
        matches = [];
        substrRegex = new RegExp(q, 'i');
        $.each(strs, function(i, str) {
            if (substrRegex.test(str)) {
                matches.push(str);
            }
        });
        cb(matches);
    };
};

/* only part I really changed */
/* I replaced the static array from the example */
/* with an array I am getting from ajax request. */
var agencies_ary = []
$.ajax({
    url: "agencies/get_unique_agency_names",
    type: "GET",
    success: function(data){
        agencies_ary = data;
    }
})


$('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'agencies_ary',
        source: substringMatcher(agencies_ary)
});

ajax 请求有效。它妥妥的 returns 一个名字数组。

Answer 1

我将展示两种不同的解决方案。两者都有效。一个比另一个短很多。

解决方案 1:

var agency_names = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: 'agencies/get_unique_agency_names'
});

$('.typeahead.name_input').typeahed(null, {
  name: 'agency_names',
  source: agency_names
});

解决方案 2

我在原始问题中遇到的问题是 javascript 在发送 ajax 请求之前加载。要在 javascript 之前执行 ajax 请求，我只需在 .done:

中指定 javascript

var agencies_ary = [];
$.ajax({
    url: "agencies/get_unique_agency_names",
    type: "GET",
    success: function(data){
        agencies_ary = data;
        console.log(agencies_ary[0]);
    }
}).done(function(){

    var substringMatcher = function(strs) {
        return function findMatches(q, cb) {
            var matches, substringRegex;
            matches = [];
            substrRegex = new RegExp(q, 'i');
            $.each(strs, function(i, str) {
                if (substrRegex.test(str)) {
                    matches.push(str);
                }
            });
            cb(matches);
        };
    };


    $('.typeahead').typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        },
        {
            name: 'agencies_ary',
            source: substringMatcher(agencies_ary)
        });


});

Answer 2

您等待 ajax 调用完成然后设置预输入的解决方案是一种方法，祝贺它可以正常工作 :)，但在我看来，使用预输入进行调用更简单、更快速类似于：

$('.typeahead').typeahead({ 
    remote: { url: "agencies/get_unique_agency_names" } 
 })

查看 Bootstrap 3 typeahead.js - remote url attributes 以获得更多建议。

Typeahead 不工作：当我输入时不显示 typeahead 建议

Typeahead not working: not showing typeahead suggestions when I type

javascript

jquery

ruby-on-rails

typeahead.js