Question

我试图更改typeahead的来源，但我发现他们找到的所有答案对我来说都没有用（可能是因为更新的bootstrap版本）。我根据用户搜索的内容进行了后端搜索。这是我的代码：

$('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1,
        limit: 2,
    },
    {
        name: 'organizations',
        source: substringMatcher(getOrganizationData())
    }).on("input", function(e) {
        organizationQuery = e.target.value;

        // Here I want to update the source

        // Not working:
        //$(".typeahead").data('typeahead').source = substringMatcher(getOrganizationData())

        // Not working:     
        //$('.typeahead').data('ttTypeahead').dropdown.datasets[0].source = substringMatcher(getOrganizationData())

        // Not working:
        // var autocomplete = $('input').typeahead();
        // autocomplete.data('typeahead').source = substringMatcher(getOrganizationData());
});

这是我的getOrganizationData（）方法：

function getOrganizationData()
{
    var tempResults = [];
    $.getJSON( "search-organization?query="+organizationQuery, function( data ) {

        $.each(data, function (key, val) {
            var display = val.coc_number + ", " + val.name
            tempResults[key] = display;
            organizationHolder[display] = val.id;
        });

    });

    return tempResults;
}

如果我无法更新来源，我该如何找到基于我输入内容的结果？提前谢谢！

Answer 1

AFAIK substringMatcher()来自示例，它仅适用于字符串数组而不需要 - 搜索是在服务器端执行的。此外，您不必响应用户输入，即typeaheads作业。要将远程JSON查询用作source，语法为：

source: function(query, sync, async) { .. }

其中sync和async是回调。我猜您返回的JSON位于表单

[ 
  { "name" : "qwerty" },
  { "name" : "another qwerty" },
  ... 
]

使用JSON时，定义displayKey很重要，因此预先知道它应该在下拉列表中显示哪个键/值属性。所以

$('.typeahead').typeahead(
    {
        hint: true,
        highlight: true,
        minLength: 1,
        limit: 2,
    },{
        name: 'organizations',
        displayKey: 'name', //example
        source: function(query, sync, async) {
           $.getJSON( "search-organization?query="+query, function( data ) {
              async(data);
           })
        })
    }
});

以上内容将自动显示带有突出显示的子字符串的预先输入。确认正在处理latest release。

如果要在typeahead中显示其他值，即提到的val.coc_number + ", " + val.name然后在调用async()之前操纵返回的JSON：

data = data.map(function(item) { 
   item.numberName = item.coc_number + ", " + item.name;
   return item;
})

并相应地更改displayKey：

displayKey: 'numberName',

预先输入更改源

1 个答案: