Question

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

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

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

数据源可以是：

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

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

格式返回数据

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

e.g。网址可以返回：

{ 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”，自动填充术语将相等   “新哟”。

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

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

2 个答案: