JQuery .autocomplete 和 html

Question

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

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

"CATEGORY" "ARTICLE"

当我按下该项目时，CATEGORY + ARTICLE 进入我的输入字段，但我只想 return 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

JQuery .autocomplete 和 html

JQuery .autocomplete and html

javascript

jquery

html

autocomplete