0

我在我的项目中使用 jQuery Autocomplete，但我遇到了一些问题。

我的自动完成功能正在运行，但我想在自动完成的最后一个结果中添加一个永久项目。为此，我使用 _renderItem（因为我想为这个项目使用不同的样式，居中，背景颜色：#000）。

工作代码：

.data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
      .data("ui-autocomplete-item", item)
      .append($("<a></a>").html(item.label))
      .append("<div style='text-align: center;'>" + item.label + "</div>")
      .appendTo(ul);
}

如您所见，这会将这种样式应用于自动完成中的所有项目。所以我将我的代码更新为：

.data("ui-autocomplete")._renderItem = function (ul, item) {
        if (item.type==="noneResult"){
            return $("<li></li>")
              .data("ui-autocomplete-item", item)
              .append($("<a></a>").html(item.label))
              .append("<div style='text-align: center;'>" + item.label + "</div>")        .appendTo(ul);
        }
 }

这是我填充自动完成的地方：

$.getJSON(
        '<%= my_rails_path %>.json',
        {search: term},
        function(json) {
            var result = [];
            $.each(json, function(key, value) {
                var item = {};
                item.type = ' ';
                item.label = value.name;
                item.value = value.name;
                result.push(item);
            })

            var item = {};
            item.type = "noneResult";
            item.label = "Create a new book called '" + term + "'."; 
            item.value = term;
            result.push(item)

                response(result);
        }
);

如果我使用“工作代码”，一切都很好，但所有项目都居中显示。如果我在我的项目中使用“更新的代码”，我会收到以下错误：

Uncaught TypeError: Cannot call method 'data' of undefined

所以我想知道，我做错了什么？为什么我会收到此错误？

4

1 回答 1

1

对于一般情况，您不会返回任何东西。只有您的特定情况得到处理，但“正常”项目首先出现，它们是死胡同，因为该函数不返回任何内容。

else所以为默认情况添加一个简单的：

.data("ui-autocomplete")._renderItem = function (ul, item) {
  if (item.type==="noneResult"){
    return $("<li></li>")
      .data("ui-autocomplete-item", item)
      .append($("<a></a>").html(item.label))
      .append("<div style='text-align: center;'>" + item.label + "</div>")
    .appendTo(ul);
  }
  else
  {
    return $("<li></li>")
      .data("ui-autocomplete-item", item)
      .append($("<a></a>").html(item.label))
      .append("<div style='text-align: center;'>" + item.label + "</div>")
      .appendTo(ul);
  }
}
于 2013-10-05T22:18:22.880 回答