自动完成 Jquery Json

Posted 2023-05-08

【中文标题】自动完成 Jquery Json

【英文标题】：Autocomplete 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 中的数据与来自外部源的响应联系起来......？

【参考方案1】：

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

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

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

如果您使用 GET 方法（这是默认方法），则必须将其包含在查询字符串中，如下所示：

url: 'http://tribesports.com/pages/parkrun-event-list?term='+request.term

1234563所需格式的数据

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