自动完成 Jquery Json答案

【问题标题】：Autocomplete Jquery Json自动完成 Jquery Json
【发布时间】：2016-05-29 03:49:57
【问题描述】：

我正在尝试使用外部 Json 作为自动完成 Jquery UI 插件的源代码：http://jqueryui.com/autocomplete/

这段代码运行良好：

    var availableTags = ["aberdeen","aberystwyth","aberystwyth juniors"]

    $( "#enter-your-parkrun" ).autocomplete({
    open: function(e) {
      var results = $.ui.autocomplete.filter(availableTags, e.term);
            response(results);
       valid = false;
     },
     select: function(e){
        valid = true;
     },
     close: function(e){
        if (!valid) $(this).val('');
     },
     source: availableTags,

});

$("#enter-your-parkrun").change(function(){
    if (availableTags.indexOf($(this).val()) == -1){
        $(this).val("");
    }
});

但由于我有近 800 个值，我需要使用外部源。我尝试了不同的方法，但我找不到让它发挥作用的方法：

$( "#enter-your-parkrun" ).autocomplete({

     source: function( request, response ) {
        $.ajax({
          url: "http://tribesports.com/pages/parkrun-event-list",
          dataType: "jsonp",
          data: {
            q: request.term
          },
          success: function( data ) {
            response( data );
          }
        });
      },
     minLength: 2,
     delay: 400,

});

我不确定 q: request.term 应该是什么以及是否应该解析数据？我还需要添加验证以确保只能接受列表中的值，它适用于我的第一个示例，不太确定如何将其传输到我的第二个代码。

谢谢

【问题讨论】：

那个服务器不支持 JSONP 是问题。
您是否收到来自外部来源的响应..？它看起来怎样..？ “我还需要添加验证以确保只能接受列表中的值” - 什么列表..？ availableTags..？如果您只接受那些为什么要发送外部请求..？如果没有，您如何将availableTags 中的数据与来自外部源的响应联系起来......？

标签： javascript jquery json jquery-ui autocomplete

【解决方案1】：

request.term 是用户迄今为止输入的内容，应该在 AJAX 调用中作为参数传递给服务器，以便服务器可以过滤结果。

在.ajax 调用中，dataType 是您期望从服务器返回的数据类型。您还没有显示它，但很可能是json，而不是jsonp。如果是 JSON jQuery 会自动解析。

关于将术语发送到服务器，

如果您使用 GET 方法（这是默认方法），则必须将其包含在查询字符串中，如下所示：
```
url: 'http://tribesports.com/pages/parkrun-event-list?term='+request.term
```

如您所见，这一切都取决于服务器上的内容。

【讨论】：