使用 jQuery 的自动完成功能转换返回的数据

Question

我正在尝试使用Autocomplete plugin 生成一个类似于IMDB 的搜索框，我希望它：

• 在选项中显示的不仅仅是文本。
• 在选择选项时充当链接（因为每个选项都是唯一的记录）。
• 如果用户选择，他们会按下按钮并在他们的输入上执行搜索。

文档说它可以使用 3 种类型的数据源：

数据源可以是：

具有本地数据的数组
一个字符串，指定一个 URL
回调

我可以让自动完成功能与第二个选项一起使用，但是无法转换返回的数据，它只需要 JSON 并将其直接放在下拉列表中。这意味着源url只能返回{label: "blah", value: "blurg"}格式的数据。

如果我可以注入一个转换函数，那么我可以让 url 返回我喜欢的任何 JSON，该函数会将数据更改为自动完成所期望的格式，但也可以按照我的意愿进行格式化，并且所有这些都不会更改由url（我不会从那里返回 HTML，只返回 JSON）。

例如url 可以返回这个：

{ label:"Grosse Point Blank", id: 3, img:"/imgs/gpb.png",...}

一个转换函数可以把它变成这样的东西：

{ label:"<a href='/films/3/grosse-point-blank'><img src='/imgs/gpb.png' />Grosse Point Blank</a>", value="grosse-point-blank"}

我已尝试使用选项 3（回调）和 getJSON 调用，但我无法让它工作。我找到的最接近我可能需要的代码是here, but it has options that aren't listed in the current docs for Autocomplete，但我不明白如何使用响应对象。

如果有人知道在 AJAX 请求中使用回调方法的示例，或者我如何注入转换代码的函数，我将不胜感激。

非常感谢任何见解或帮助。

Answer 1

您可以使用自动完成的_renderItem()私有方法来格式化返回数据。它看起来像这样：

$("#element").autocomplete({...}).data( "autocomplete" )._renderItem = function( ul, item ) {
    //...
};

你可以在这里查看方法定义https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js#L520

我使用过的代码示例：

$("#element").autocomplete({...})
.data("autocomplete")._renderItem = function( ul, item ) {
    return $( "<li></li>" ) // create the list item
        .data( "item.autocomplete", item ) // save the data to the DOM
        .append( "<a>"+ item.label + "</a>" ) // add the HTML
        .appendTo( ul ); // append to the UL
};

Answer 2

这是使用回调方法时的简要结构。

  source: function( request, response ) {
    $.ajax({
      ...
      success: function( data ) {
        // do transformation of data here
        response(data);          
      }
    });
  }

引用自您的链接，http://api.jqueryui.com/autocomplete/#option-source

第三种变体，回调，提供了最大的灵活性，并且 可用于将任何数据源连接到自动完成。回调 得到两个参数：

一个请求对象，具有一个名为“term”的属性，它指的是 到文本输入中当前的值。例如，当用户 在城市字段中输入“new yo”，自动完成项将等于 “新哟”。

一个响应回调，它需要一个参数 包含要向用户建议的数据。应过滤此数据 基于提供的术语，并且可以采用所描述的任何格式 以上用于简单的本地数据（字符串数组或对象数组） 标签/值/两个属性）。提供自定义时很重要 源回调来处理请求期间的错误。你必须永远 即使遇到错误也调用响应回调。这 确保小部件始终具有正确的状态。