如何为 jquery-ui 自动完成修复此 jQuery/coffeescript 代码？答案

【问题标题】：How to fix this jQuery/coffeescript code for jquery-ui autocomplete?如何为 jquery-ui 自动完成修复此 jQuery/coffeescript 代码？
【发布时间】：2014-09-16 19:04:41
【问题描述】：

嗨，我有类似 jquery-ui 1.11 的代码：

jQuery ->
  $('#search_terms').autocomplete
    source: (request, response) ->
      $.ajax
        url: '/list.json'
        dataType: "json"
        data: { term: request.term }
        success: (data) ->
          response: $.map(data, (v, i) ->
            label: i
            value: v.toString()
          )

如果我这样做 console.log $.map(data, (v, i)... 我会在 Firebug 控制台窗口中得到以下输出：[Object {label="someX", value="someY"}, Object....]

如何修复 $.map 代码以获得 jquery ui 自动完成的正确 JSON 格式？

在$.map 代码周围添加JSON.stringify 会产生类似：

[{"label":"Label1","value":"5"}, ...] 似乎应该可以工作，但不能。不知道是不是因为我启用了 Twitter Bootstrap 3...

【问题讨论】：

标签： jquery ruby-on-rails jquery-ui autocomplete coffeescript

【解决方案1】：

jQuery 自动完成小部件希望您使用return an array of strings to offer to the user。如果您希望将值提供给用户，您可以像这样转换您的数组：

$.map(data, (v, k) ->
  v.toString()
)

或者 - 似乎更有可能 - 如果您希望将标签提供给用户，您可以像这样转换您的数组：

$.map(data, (v, k) ->
  k
)

相当于data.keys()。

你也必须调用响应函数；我认为你的 CoffeeScript 返回一个带有一个键的对象，response。所以你的整体 CoffeeScript 应该是这样的：

jQuery ->
  $('#search_terms').autocomplete
    source: (request, response) ->
      $.ajax
        url: '/list.json'
        dataType: "json"
        data: { term: request.term }
        success: (data) ->
          response data.keys()
        error: response []

（我添加了一个error 回调，因为文档说you must call response even in the case of an error。）

最后，您也许可以简化这一点。如果你修改你的服务器，像list.json?term=search 这样的请求会返回一个 JSON 字符串数组，那么你的自动完成可以很简单：

jQuery -> 
  $('#search_terms').autocomplete
    source: "/list.json"

【讨论】：