Question

我目前在我的应用程序中使用jQuery UI Autocomplete，我想通过将结果中的最后一个单词变为不同的颜色（比如蓝色）来自定义结果的设计。为此，我使用http://jqueryui.com/autocomplete/#custom-data如下：

$(input).autocomplete(config)
        .data("ui-autocomplete")._renderItem = function (ul, item) {
                    return $("<li>").append("<a>" + item.label + " " + "<span class=\"blue\">" + item.explicitLabel + "</span>" + "</a>").appendTo(ul);
                };

其中item.label是没有最后一个单词的自动填充结果，item.explicitLabel是最后一个单词。我唯一的问题是，在搜索时，忽略最后一个单词（explicitLabel）。这是一个例子：http://jsfiddle.net/japZB/。我需要做什么才能搜索完整的输出结果？

Answer 1

更简单直接的方法是为全文添加额外字段

var list = [];
list.push({
  label: "This is a good test", partialLabel: "This is a good", explicitLabel: "test" 
});
list.push({
  label: "This is a bad test", partialLabel: "This is a bad", explicitLabel: "test" 
});
list.push({
 label: "This is a bad nice day", partialLabel: "This is a nice", explicitLabel: "day" 
});

但在我看来，这是一种矫枉过正。如果你拥有源列表格式，你可以拥有像这样简单的东西

var list = [];
list.push("This is a good test");
list.push("This is a bad test");
list.push("This is a bad nice day");

从字符串中获取最后一个单词，使用字符串操作对其进行着色。 lastIndexOf将有助于获得最后的空白区域（如果有的话）

jQuery UI自动完成自定义搜索

1 个答案: