当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">