javascript - jQuery 自动完成将值附加到 URL

Question

我目前正在我的网站上实现一个自动完成模块，用于解析来自 Weather Underground 的天气信息

$(function(request) {
    var cities = []; // setup empty array
    $.ajax({
      url : "http://autocomplete.wunderground.com/aq?",
      query : request.term,
      dataType : "json",
      success : function(parsed_json) {
        for(i = 0; i < parsed_json['RESULTS'].length; i++) {
            cities.push(parsed_json['RESULTS'][i]['name'])
        }
      }
    });
    $( "#tags" ).autocomplete({
        source: cities
    });
});

本质上，我填充了一个名为 cities 的数组当用户输入搜索查询时，系统会将城市名称与城市名称一起发送给 Weather Underground 的自动完成 API。

使用变量 query : request.term ，我尝试附加键值 query=[search term]到url结束。但是，当我检查控制台时，似乎 request.term始终为空。

我的问题是 - 为什么我的文本框输入参数为空？

文本框'id是 tags .

Answer 1

您需要在页面加载时初始化小部件，然后在您键入时更新其数组。由于ajax是异步的，因此您需要更新成功回调中的自动完成数组

$(function () {
    var $input = $('#tags');
    $input.autocomplete({
        source: [] // Initially empty
    }).on('input', function () {
        $.ajax({
            url: "http://autocomplete.wunderground.com/aq?",
            data: { "query": $input.val() },
            dataType: "json",
            success: function (parsed_json) {
                var cities = [];
                console.log(parsed_json);
                for (i = 0; i < parsed_json['RESULTS'].length; i++) {
                    cities.push(parsed_json['RESULTS'][i]['name'])
                }
                $input.autocomplete('option', 'source', cities);
            }
        });
    });
});

这是一个 fiddle :http://jsfiddle.net/d8zxhq2b/