自动完成 Jquery Json

Autocomplete Jquery Json

本文关键字：Jquery Json      更新时间：2023-09-26

我正在尝试使用外部 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 应该是什么，是否应该解析数据？我还需要添加验证以确保只能接受列表中的值，它适用于我的第一个示例，不太确定如何将其传输到我的第二个代码。

谢谢

request.term是

用户到目前为止键入的内容，应作为 AJAX 调用中的参数传递给服务器，以便服务器可以筛选结果。

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

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

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

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

  • 如果使用其他方法（通常是 POST），则必须在 jquery ajax 调用选项中指定方法选项，并且还要指定 contentType，应为 JSON：contentType："application/json"，并以所需的格式发送数据

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

相关文章：