提前输入更改源 [英] Typeahead change source

问题描述

我正在尝试更改预输入的来源，但是我发现的所有答案都对我不起作用(可能是由于更新了引导程序版本).我根据用户搜索内容进行了后端搜索.这是我的代码:

I'm trying to change the source of typeahead, but all them answers I found didn't work for me (probably because of a newer bootstrap version). I made a backend search based on what the user searches. Here is my code:

$('.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()方法:

And here is my getOrganizationData() method:

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

如果无法更新源代码，应该如何根据输入的内容查找结果?预先感谢！

How am I supposed to find results based on what I type if I can't update the source? Thanks in advance!

推荐答案

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

AFAIK substringMatcher() is from the examples, it works only on string arrays and is not needed - the search is performed serverside. Also you do not have to respond to user input, that is the typeaheads job. To use a remote JSON query as source the syntax is :

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

其中sync和async是回调.我想您返回的JSON格式为

where sync and async is callbacks. I guess your returned JSON is on the form

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

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

When using JSON it is important to define a displayKey, so the typeahead know which key / value property it should show in the dropdown. So

$('.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);
           })
        })
    }
});

上面将自动显示带有突出显示的子字符串的预输入.确认正在使用最新版本.

The above will automagically show a typeahead with highlighted substrings. Confirmly working on latest release.

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

If you want to display some other values in the typeahead, i.e the mentioned val.coc_number + ", " + val.name then manipulate the returned JSON before you call async() :

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

并相应地更改displayKey:

displayKey: 'numberName', 

这篇关于提前输入更改源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！