Why is this alert being fired three times instead of once

StackOverflow https://stackoverflow.com/questions/13654353

  •  03-12-2021
  •  | 
  •  

Question

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>
​
Was it helpful?

Solution

When you type j in the field as suggested, three items are returned. For each item, the _renderItem method is being called to render each item, resulting in three alerts. It is working as intended.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top