In this jsBin file an alert (which just displays ‘fired’) is called three times.
It should be just called once since its just added to :
.data( "autocomplete" )._renderItem = function( ul, item ) {
Here is the bin file :
http://jsbin.com/welcome/55641/edit
How can the code be amended so that the alert is just fired once ?
The entire code :
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
fieldset {width: 60%; margin: 0 auto;}
div.row {clear: both;}
div.row label {float: left; width: 60%;}
div.row span {float: right; width: 35%;}
</style>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<script>
$(function() {
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 ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
alert('fired');
return $("#suggestionsDiv").append("<div class='row'> <label for='first-field'>The first field</label><span><input type=text id='first-field' size='15' /></span></div>");
};
});
</script>
</head>
<body>
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="" />
<input id="project" />
<input type="hidden" id="project-id" />
<p id="project-description"></p>
<fieldset>
<legend>Suggestions</legend>
<div id ="suggestionsDiv">
<div class="row">
<label for="first-field">The first field</label>
<span><input type="text" id="first-field" size="15" /></span>
</div>
<div class="row">
<label for="second-field">The second field with a longer label</label>
<span><input type="text" id="second-field" size="10" /></span>
</div>
<div class="row">
<label for="third-field">The third field</label>
<span><input type="text" id="third-field" size="5" /></span>
</div>
</div>
</fieldset>
</body>
</html>
When you type
jin the field as suggested, three items are returned. For each item, the_renderItemmethod is being called to render each item, resulting in three alerts. It is working as intended.