自动完成 - 根据下拉选择更改查找/服务 URL

Question

我有一个包含多个选项的下拉菜单可供选择。当我选择 value1（公司）时，自动完成应该使用服务调用。当我选择 value2 时，应该使用查找。

我该如何实现？

$('#qckSearchKeyword').autocomplete({

    serviceUrl: function() {
        var option = $('#qck-unspsc').val();
        if (option == "country") {

            // when country selected through drop down i should use lookup rather then service call
            serviceloc = "getCountries";

            localStorage.option = "country";
        }

        if (option == "industry") {
            serviceloc = "getSicCode";
            localStorage.option = "sicCode";
        }
        return serviceloc;
    },

    onSelect: function(suggestion) {
        localStorage.tmpSelectedTxt = $.trim($('#qckSearchKeyword').val());
        $('#selectFromSuggestions').val("true");
        $('#qckSearchKeyword').focus();
    },

    paramName: "searchTerm",
    delimiter: ",",
    minChars: 3,
    transformResult: function(response) {
        // alert(response);
        return {
            suggestions: $.map($.parseJSON(response), function(item) {
                return {
                    value: item.suggesCode,
                    data: item.suggesString
                };
            })
        };
    }
});

Answer 1

1. 为不同的自动完成调用拆分选项。
2. 在您选择的选项上使用data-type。
3. 切换数据类型并扩展适当的选项
4. 使用适当的选项初始化自动完成

我只是复制/粘贴了我过去为此功能所做的一些配置：

...
ajaxOptionsFlight: {
    url: '/api/autocomplete/airport/',
    type: 'get',
    dataType: 'xml'
},
ajaxOptionsHotel: {
    url: '/api/locations/hotel/',
    type: 'get',
    dataType: 'xml'
},
ajaxOptionsCitytrip: {
    url: 'http://budapest.onlinetravel.ch/destfinder',
    dataType: 'jsonp',
    data: {
        vendors: 'merger',
        client: 'conbe',
        filter: 'IATA',
        format: 'json',
        language: 'en'
    }
},
ajaxOptionsCar: {
    url: '/api/locations/car/',
    dataType: 'json'
},
ajaxOptionsSubstitute: {
    url: 'http://gd.geobytes.com/AutoCompleteCity',
    dataType: 'jsonp'
},
autocompleteOptions: {
    autoFocus: true,
    minLength: 1
},
....

之后，我确保可以打开数据类型并将其挂接到自动完成选项的 source 参数上：

autocompleteOptions = $.extend({}, autocompleteOptions, {
    source: type === 'citytrip' ? function (request, response) {
        ajaxOptions = $.extend(true, {}, ajaxOptionsCitytrip, {
            data: {
                name: $.trim(request.term),
                language: cookieLanguage
            },
            success: function (d) {
                response($.map(d.Destinations, function (item) {
                    return {
                        label: item.name + ', ' + item.country,
                        value: item.name,
                        code: item.olt_id
                    };
                }));
            }
        });

        $.ajax(ajaxOptions);
    } : type === 'flight' ? function (request, response) {
        ajaxOptions = $.extend({}, ajaxOptionsFlight, {
            url: ajaxOptionsFlight.url + $.trim(request.term),
            success: function (d) {
                response($.map($(d).find('airport'), function (item) {
                    return {
                        label: $(item).children("displayname").text(),
                        value: $(item).children("displayname").text(),
                        code: $(item).children("code").text()
                    };
                }));
            }
        });

        $.ajax(ajaxOptions);
    } : type === 'hotel' ? function (request, response) {
        // and so on ...
    }
});

我承认，这不是最优雅的写作方式。但它基本上是数据类型和配置选项之间的简单映射，以提供自动完成功能。 最后我只打电话：

input.autocomplete(autocompleteOptions);

我们完成了。希望这是有道理的。