gpt4 book ai didi

javascript - 第二次调用 Function 时,Jquery Autocomplete _renderItem 不起作用

转载 作者:行者123 更新时间:2023-11-28 04:17:39 37 4
gpt4 key购买 nike

我想生成两个输入字段,并带有生成图标的自动完成功能。我使用了 _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 自动生成字段,并且总体上只有一个自动完成功能,因此我通过类调用自动完成功能。还有另一种可能吗?谢谢你的帮助。

最佳答案

each 包裹它即可因此它将调用集合中的每个项目。

Iterate over a jQuery object, executing a function for each matched element.

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

关于javascript - 第二次调用 Function 时,Jquery Autocomplete _renderItem 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45692240/

37 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com