JQuery .autocomplete 和 html

Question

我有一个小问题。 我想创建一个用户友好的搜索，所以我必须提供一个自动完成输入的功能。

我的问题是，有超过 1 个类别，所以我想写在自动完成 - 下拉列表中：

“类别”“文章”

当我按下项目时，CATEGORY + ARTICLE 进入我的输入字段，但我只想返回 ARTICLE 名称:)

这是我的 HTML：

<input id="tags" type="text" name="s" value="" placeholder="Suche Items, Quests, Gebiete und mehr !">

在这里你可以看到我的脚本（jQuery）：

$(function() {
        var availableTags = [
            "<b>Community </b> Please help me.",
            "<b>Article </b> New update !",
            "<b>Community </b> A Question..."
        ];
        $( "#tags" ).autocomplete({
        //  source: availableTags
            
        source: function(request, response) {
            var results = $.ui.autocomplete.filter(availableTags, request.term);
            response(results.slice(0, 10));
        }
            
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
         return $("<li></li>")
             .data("item.autocomplete", item)
             .append("<a>" + item.label + "</a>")
             .appendTo(ul);
     };
    });

我希望你能理解我想要达到的目标，谢谢:)

Answer 1

您可以在对象中设置label 和value 并将其传递给自动完成功能：

     var availableTags = 
      [
       {label:"Community", value: "Please Help Me"},
       {label:"Article", value: "New Update!"},
       {label:"Community", value: "A Question..."}
      ];

然后您可以在每个项目上调用.label 和value：

.append("<a><b>" + item.label + "</b>: " + item.value + "</a>")

完整代码：

$(function() {
     var availableTags = 
      [
       {label:"Community", value: "Please Help Me"},
       {label:"Article", value: "New Update!"},
       {label:"Community", value: "A Question..."}
      ];

        $( "#tags" ).autocomplete({
        //  source: availableTags

        source: function(request, response) {
            var results = $.ui.autocomplete.filter(availableTags, request.term);
            response(results.slice(0, 10));
        }

        }).data("ui-autocomplete")._renderItem = function (ul, item) {
         return $("<li></li>")
             .data("item.autocomplete", item)
             .append("<a><b>" + item.label + "</b>: " + item.value + "</a>")
             .appendTo(ul);
     };
    });

FIDDLE

更新

搜索似乎在label 上，因此您可以为label 添加全名，并将您想要设置的value 设置为输入值：

var availableTags = [
     {label:"<b>Community</b>: Please Help Me", value: "Please Help Me"},
     {label:"<b>Article:</b> New Update!", value: "New Update!"},
     {label:"<b>Community:</b> A Question...", value: "A Question..."}
];

然后：

.append("<a>" + item.label + "</a>")

UPDATED FIDDLE