當Function第二次調用時，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">