JQuery .autocomplete и html

Question

У меня есть небольшой вопрос. Я хочу создать удобный поиск, поэтому я должен предоставить функцию автоматического завершения ввода.

Моя проблема в том, что есть более чем 1 категории, поэтому я хочу написать в автозаполнения - выпадающего списка:

«КАТЕГОРИЯ» «Статья»

Когда я нажимаю на пункт, РУБРИКИ + Статья идет в моем поле ввода, но я только хочу, чтобы вернуть имя 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

UPDATE

поиска, как представляется, на 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