Jquerymobile-1.4.0 keyUp event is called twice every time character is entered in the autocomplete textfield

426 views Asked by At

I used the example from jQuery mobile site Autocomplete source code

It's working fine, but when I tried to give alert in the script inside the listviewbeforefilter event, it's showing the alert 3 times, so when 3 characters are entered, it will prompt around 7-9 times.

Why is it showing so many alerts? I thinks it should prompt only once when the character is inserted. Here is the code retrun in script for autocomplete:

$( document ).on( "pageinit", "#myPage", function() {
        alert("abc");

            $( "#autocomplete" ).on( "filterablebeforefilter", function ( e, data ) {


                var $ul = $( this ),
                    $input = $( data.input ),
                    value = $input.val(),
                    html = "";
                $ul.html( "" );
                alert("789");
                if ( value && value.length > 2 ) {

                    $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
                    $ul.listview( "refresh" );
                    $.ajax({
                        url: "http://gd.geobytes.com/AutoCompleteCity",
                        dataType: "jsonp",
                        crossDomain: true,
                        data: {
                            q: $input.val()
                        }
                    })
                    .then( function ( response ) {
                        alert("123");
                        $.each( response, function ( i, val ) {
                            html += "<li>" + val + "</li>";
                        });
                        $ul.html( html );
                        $ul.listview( "refresh" );
                        $ul.trigger( "updatelayout");
                    });
                }
            });
           });

Here is the code return in the body tag:

<div data-role="content">
<h3>Cities worldwide</h3>
<p>After you enter <strong>at least three characters</strong> the autocomplete `function will show all possible matches.</p>
<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" `data-filter-placeholder="Find a city..." data-filter-theme="a">
</ul>
</div>
0

There are 0 answers