0

我正在使用 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)：使用基于正则表达式的选项匹配项更新组合框

我当前使用 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，因为我无法让它在那里渲染。

4

1 回答 1

0

我终于让它工作了！

http://jsfiddle.net/SRekL/

兴趣线：

输入 -> 源 -> ajax -> 成功

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(...)依赖于属性“名称”。
  • updateOptions(select, optionData)：使用返回的数据更新此组合框的选项
  • filterOptionsForResponse(select, term)：根据术语过滤选项并突出显示匹配的文本。

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

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

此外，SO 上的一系列线程对我有很大帮助：

Clue trail

于 2012-05-31T10:10:18.400 回答