Question

我正在使用jquery组合框并依赖于那里提供的源代码。我需要从远程源提供的数据，所以我用ajax连接它。但是，由于AJAX是异步调用，我需要使用搜索结果数据更新组合框。

如何在组合框上触发搜索？

段：

/* In 
$.widget( "ui.combobox", {
            _create: function() {
// input definition
*/
.autocomplete({
    delay: 0,
    minLength: 0,
    source: function( request, response ) {
        // implements retrieving and filtering data from the select
        var term = request.term;

        if(term.length >= 2){
            var abbreviation = term.substring(0,2);
            if(!(abbreviation in cache)){
                searchResultData = searchCities(abbreviation);
                updateOptions(select, searchResultData);
                cache[abbreviation] = 1;
            }
        }

        // updates the search widget with options matching request.term
        var responseData = filterOptionsForResponse(select, term);

        response(responseData);
    },

其余代码与jquery站点上提供的代码相同。当searchCities(abbreviation)返回本地对象数组时，上面的代码非常正常。

searchCities(abbreviation)：返回与缩写
updateOptions(select, data)：使用给定数据更新选择组合框中的选项
filterOptionsForResponse(select, term)：使用基于Regex

我目前使用ajax的searchCities版本：

function searchCities(abbreviation){
    if(!!abbreviation){
        $.ajax({
                url: "/wah/destinationsJson.action",
                dataType: "json",
                data: {
                    term: abbreviation
                },
                type: "GET",
                success: function(data){
                    updateOptions($("#searchbox"), data.cities);
                    // $("#searchbox input").trigger('autocompleteselect', data.term);
                    // return data.cities;
                }
            });
    }
}

以上触发器不会触发搜索！有人可以解释一下我如何触发对这个组合框的搜索。

PS：我很抱歉没有提供jsfiddle / jsbin，因为我无法在那里渲染它。

Answer 1

我终于开始工作了！

http://jsfiddle.net/SRekL/

兴趣爱好：

输入 - ＆gt;来源 - ＆gt; ajax - ＆gt;成功

success: function(data) {
    optionData = $.map(data.geonames,function(item){
        return new Object( {name: item.adminName1} ); ;
    });

    updateOptions(select, optionData);
    response(filterOptionsForResponse(select, term));
    return;
}

备注：

将optionData转换为对象数组，因为我的函数updateOptions(...)依赖于属性“name”。

updateOptions(select, optionData)：使用返回的数据
更新此组合框的选项
filterOptionsForResponse(select, term)：根据字词过滤选项并突出显示匹配的文字。

此解决方案是根据我的要求量身定制的，我需要使用前两个字符点击服务器。我根据搜索到的术语过滤选项，并将结果集附加到给定的选项列表中。

为了演示，我使用了“http://ws.geonames.org/searchJSON”作为jsFiddle中ajax调用的URL。

此外，SO上的一系列线程向我证明了很大的帮助：

Under the hood of jquery combobox - 解释组合框内容的最有价值的文章

Clue trail

How to use remote source with jquery ui combobox?

jquery ui autocomplete combobox widget example modified for ajax source

http://jsfiddle.net/and7ey/TFerw/3/

如何在jquery自动完成组合框中触发搜索？

1 个答案: