0

我正在尝试使用Autocomplete 插件生成一个类似于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电话，但我无法让它工作。我找到的最接近我可能需要的代码在这里，但它具有当前文档中未列出的 Autocomplete 选项，我不明白如何使用响应对象。

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

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

4

2 回答 2

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
};
于 2012-10-04T15:33:46.440 回答
1

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

  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”时，自动完成项将等于“new yo”。

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

于 2012-10-04T15:41:01.517 回答