在自動完成功能中顯示兩個不同的值

我在嘗試設置一個自動完成功能，該功能會在下拉列表中顯示2個值。準確地說，我有一個用戶名和ID的數據庫，並且我想通過輸入他的名字來搜索用戶，然後在所有擁有這個名字的用戶之間進行選擇。例子：我有兩個用戶名爲傑克，ID爲1和2 我希望能夠通過在下拉列表中seing的ID選擇我想要的傑克在自動完成功能中顯示兩個不同的值

這裏是我的實際代碼： 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() 返回對象的數組，它包含的ID和用戶的名稱

的實際代碼我已經從here

採取目前當i型3個字母我得到這個錯誤在我的輸入字段：

我一直在尋找互聯網這個錯誤的，但我真的不明白什麼原因造成的，我不知道我能做些什麼來解決它。

如果有人可以幫助我在任何方面我會很感激:) 不要猶豫，如果你從我的代碼或嘗試需要更多的信息來解決該死的東西告訴我！

在此先感謝您，祝您有美好的一天！

來源

2017-02-16 darzang

嘗試重寫自動完成像這樣的_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

來源

2017-02-16 12:40:00

這裏是鏈接到與我把原來的問題的代碼的jsfiddle：https://jsfiddle.net/0f2987mf/（這是我第一次使用的jsfiddle所以如果我忘了告訴我:)） – darzang

@darzang你有沒有嘗試'_renderItem'方法？ –

我替換了所有的JS我原先放在問題上，你告訴我，現在我得到了這個錯誤：！[Valid XHTML]（http://hpics.li/7ebede8）。 – darzang

在自動完成功能中顯示兩個不同的值

回答

相關問題