google maps - Stop jquery iteration if the .search method will be equal to -1 -

i built nice tools in order find store on google maps iterate every location javascript object. need "no search result" when .search function won't find result. problem code iterate every location anyway, create multiple text of locations. there anyway fix problem? here code:

the javascript:

    var output = '<div class="searchresults">';     $.each(markers, function(key, markers) {             output += '<div>';         output += '<h2>'+ markers.title +'</h2>';         output += '<div>'+ markers.html +'</div>';         output += '<div>'+ markers.city +'</div>';         output += '<div>'+ markers.postalcode +'</div>';         output += '<div>'+ markers.phone +'</div>';         output += '</div>';      });     output += '</div>';     $('#legend').html(output);      $('#geocomplete').keyup(function() {         var searchfield = $('#geocomplete').val();         var myexp = new regexp(searchfield, "i");         var output = '<div class="searchresults">';         $.each(markers, function(key, markers) {             if (markers.city.search(myexp) == -1 && markers.postalcode.search(myexp) == -1) {                 output += ( "<p>no search result</p>" );             } else {                 output += '<div>';                 output += '<h2>'+ markers.title +'</h2>';                 output += '<div>'+ markers.html +'</div>';                 output += '<div>'+ markers.city +'</div>';                 output += '<div>'+ markers.postalcode +'</div>';                 output += '<div>'+ markers.phone +'</div>';                 output += '</div>';             }         });         output += '</div>';         $('#legend').html(output);     });  } google.maps.event.adddomlistener(window, 'load', initialize); 

and html:

    <div class="container-fluid map">         <h2>where buy</h2>         <fieldset>             <legend>find store near you</legend>             <form>                 <input id="geocomplete" class="controls" type="text" placeholder="start typing city or postal code chickapea!" size="60" />                 <input id="find" type="button" value="find" />             </form>         </fieldset>         <div id="legend"></div>         <div class="container-fluid" id="map-canvas-two"></div>     </div>  </body> </html> 

i understood problem, minimal, complete, , verifiable.
;)

see codepen here

you need "flag" determine if no result found...
in order block "repetitive no result found mention" on loop iterations.

and place "no result found" out of each() loop.

here modified code part:

$('#geocomplete').keyup(function() {     var searchfield = $('#geocomplete').val();     var myexp = new regexp(searchfield, "i");     var output = '<div class="searchresults">';      var flagunfound = true;     $.each(markers, function(key, markers) {           if (markers.city.search(myexp) != -1 || markers.postalcode.search(myexp) != -1) {           flagunfound = false;              output += '<div>';             output += '<h2>'+ markers.title +'</h2>';             output += '<div>'+ markers.html +'</div>';             output += '<div>'+ markers.city +'</div>';             output += '<div>'+ markers.postalcode +'</div>';             output += '<div>'+ markers.phone +'</div>';             output += '</div>';          }     });      if(flagunfound){       output += ( '<p>no search result</p>' );     }     output += '</div>';     $('#legend').html(output); }); 

try "l9y" postal code in input.