當第二次調用函數時，Jquery Autocomplete _renderItem 不起作用

Question

我想生成兩個帶有自動完成功能的輸入字段，可以生成圖標。 我使用了_renderItem但意識到 - 通過使用單個類為多個輸入字段調用自動完成 - 第二個字段不會調用_renderItem函數：

看這里：

 var $project = $('.project'); var projects = [{ value: "jquery", label: "jQuery", desc: "the write less, do more, JavaScript library", icon: "jquery_32x32.png" }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", icon: "jqueryui_32x32.png" }, { value: "sizzlejs", label: "Sizzle JS", desc: "a pure-JavaScript CSS selector engine", icon: "sizzlejs_32x32.png" } ]; $project.autocomplete({ minLength: 0, source: projects, focus: function(event, ui) { this.val(ui.item.label); return false; } }); $project.data("ui-autocomplete")._renderItem = function(ul, item) { var $li = $('<li>'), $img = $('<img>'); $img.attr({ src: 'https://jqueryui.com/resources/demos/autocomplete/images/' + item.icon, alt: item.label }); $li.attr('data-value', item.label); $li.append('<a href="#">'); $li.find('a').append($img).append(item.label); return $li.appendTo(ul); };

 <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <div id="project-label">This one works:</div> <input class="project"> <br /> <br /> <br /> <br /> <div id="project-label">This one does not show Images in the List:</div> <input class="project">

為什么在第二個自動完成輸入字段中沒有顯示圖像。 我怎樣才能讓它工作。 由於在我的網站中，我使用 php 自動生成字段並且總體上只有一個自動完成功能，因此我通過該類調用自動完成功能。 還有另一種可能嗎？ 謝謝你的幫助。

Answer 1

只需用each包裹它，這樣它就會為集合中的每個項目調用。

_{迭代一個 jQuery 對象，為每個匹配的元素執行一個函數。}

 var $project = $('.project'); var projects = [{ value: "jquery", label: "jQuery", desc: "the write less, do more, JavaScript library", icon: "jquery_32x32.png" }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", icon: "jqueryui_32x32.png" }, { value: "sizzlejs", label: "Sizzle JS", desc: "a pure-JavaScript CSS selector engine", icon: "sizzlejs_32x32.png" } ]; $project.autocomplete({ minLength: 0, source: projects, focus: function(event, ui) { this.val(ui.item.label); return false; } }); $project.each(function() { var $proj = $(this); $proj.data("ui-autocomplete")._renderItem = function(ul, item) { var $li = $('<li>'), $img = $('<img>'); $img.attr({ src: 'https://jqueryui.com/resources/demos/autocomplete/images/' + item.icon, alt: item.label }); $li.attr('data-value', item.label); $li.append('<a href="#">'); $li.find('a').append($img).append(item.label); return $li.appendTo(ul); }; });

 <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <div id="project-label">This one works:</div> <input class="project"> <br /> <br /> <br /> <br /> <div id="project-label">This one does not show Images in the List:</div> <input class="project">