Отобразить два разных значения в автозаполнении

Question

Я пытаюсь установить автозаполнение, которое отображает 2 значения в раскрывающемся списке. Точно, у меня есть база данных пользователей с именами и идентификаторами, и я хочу искать пользователя, набрав его имя, а затем у вас есть выбор между всеми пользователями, у которых есть это имя. Пример: у меня есть два пользователя по имени Джек, с ID 1 и 2 Я хочу, чтобы иметь возможность выбрать, какие Джек я хочу от Seing идентификаторы в списке

Вот мой реальный код: HTML

<div class="col-sm-3 col-md-3"> 
    <form> 
     Nom: <input type="text" id="ag_nom_pub" value="Oih">    <!-- this is the field used for the autocomplete --> 
    </form> 
</div>` 

JS:

$('#ag_nom_pub').autocomplete({ 
    // This shows the min length of charcters that must be typed before the autocomplete looks for a match. 
    minLength: 3,source: function (request, response) { 
     response($.map(ag_pandaone_webservice('ag_publicitaire_get_list',$('#ag_nom_pub').val(), function (value, key) { 
      return { 
       label: value.NOMPUBLICITAIRE, 
       value: value.ENTITYID 
      } 
     })));  
},  
    focus: function(event, ui) { 
     $('#ag_nom_pub').val(ui.item.NOMPUBLICITAIRE); 
     return false; 
    }, 
    // Once a value in the drop down list is selected, do the following: 
    select: function(event, ui) { 
     // place the person.given_name value into the textfield called 'select_origin'... 
     $('#ag_nom_pub').val(ui.item.NOMPUBLICITAIRE); 
     // and place the person.id into the hidden textfield called 'link_origin_id'. 
     $('#idPub').val(ui.item.ENTITYID); 
      return false; 
    } 
}); 

NOMPUBLICITAIRE и EntityId является именем переменных из базы данных пользователей я хочу, чтобы отобразить в моем списке. $.map(ag_pandaone_webservice('ag_publicitaire_get_list',$('#ag_nom_pub').val() возвращает массив объекта, который содержит идентификатор и имя пользователя

Реальный код я был взят из here

На данный момент я получаю эту ошибку, когда я типа 3-х букв в моем поле ввода:

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

Если бы кто-нибудь мог мне помочь, я был бы благодарен :) Не стесняйтесь говорить мне, если вам нужна дополнительная информация из моего кода или попытки исправить эту чертову вещь!

Заранее благодарен и у нас отличный день!

Answer 1

Попытка переопределить _renderItem функцию автозаполнения, как это:

Для Jquery UI до 1,10:

$('#ag_nom_pub').autocomplete({ 
    // Your options goes there 
}).data("autocomplete")._renderItem = function (ul, item) { 
    // Here you are returning the element wich will be rendered 

    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + item.ENTITYID + " - " + item.NOMPUBLICITAIRE + "</a>") 
     .appendTo(ul); 
}; 

jsfiddle for versions before 1.10

Для JQuery UI после 1,10:

$('#ag_nom_pub').autocomplete({ 
    // Your options goes there 
}).data("ui-autocomplete")._renderItem = function (ul, item) { 
    // Here you are returning the element wich will be rendered 

    return $("<li></li>") 
     .data("ui-autocomplete-item", item) 
     .append("<a>" + item.ENTITYID + " - " + item.NOMPUBLICITAIRE + "</a>") 
     .appendTo(ul); 
}; 

jsfiddle for versions after 1.10

---

Before jquery UI 1.10, the data tag was autocomplete and since 1.10 it is ui-autocomplete . The same applies for item.autocomplete wich becomes ui-autocomplete-item

Bonus link: jQuery UI 1.10 Upgrade Guide about autocomplete