javascript - Filter Listview Not Showing Up Properly -

i made filtered listview, shows 2 search boxes:

my code:

html

<div data-role="page" id="searchevents"> <div data-role="header"> <h1>search</h1> </div> <div data-role="content">     <ul id='searchlist' data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="search club or event name..."></ul> </div> </div> 

js

$( document ).on( "pageinit", "#searchevents", function() {      $( "#searchlist" ).on( "listviewbeforefilter", function ( e, data ) {     var $ul = $( ),     $input = $( data.input ),     value = $input.val(),     html = "";     $ul.html( "" );     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 ) {             $.each( response, function ( i, val ) {                 html += "<li>" + val + "</li>";             });             $ul.html( html );             $ul.listview( "refresh" );             $ul.trigger( "updatelayout");         });     }     }); }); 

if take out

html code (above), both search boxes go away, know coming same 1 line source. how fix this?

try adding alert('')'s various parts of code, example, within $.each section, determine duplication happening. can expect alert triggered twice in problematic area, possibly back-to-back, or once during 2 separate iterations. then, once figure out section causing duplication, can determine event responsible , modify code accordingly.