Stoppen Sie die Jquery-Iteration, wenn die .search-Methode gleich -1

Question

ist. Ich habe ein nettes Tool erstellt, um mein Geschäft auf einer Google-Karte zu finden, die jeden Ort von einem Javascript-Objekt aus iteriert. Ich brauche ein "kein Suchergebnis", wenn meine .search-Funktion kein Ergebnis findet. Das Problem ist, dass mein Code sowieso mit jedem Ort iteriert wird, so dass er einen multiplen Text für alle meine Orte erzeugt. Gibt es trotzdem eine Lösung für dieses Problem? Hier ist es mein Code:

Die 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); 

und die html:

<div class="container-fluid map"> 
     <h2>Where To Buy</h2> 
     <fieldset> 
      <legend>Find a Store Near You</legend> 
      <form> 
       <input id="geocomplete" class="controls" type="text" placeholder="Start typing your City or Postal Code to get your 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> 

Answer 1

Ich verstehe das Problem, die Minimal, vollständig und nachprüfbar war. Siehe)

meinen CodePen here

Sie nur einen „Flag“ muß, um zu bestimmen, wenn kein Ergebnis gefunden wurde ...
Um dieses „repetitives kein Ergebnis Erwähnung gefunden“ zu blockieren über Schleifeniterationen;
.

UND, um dieses "no result found" aus der each() Schleife zu entfernen. Hier

ist der modifizierte Code-Teil:

$('#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); 
}); 

Versuchen mit "L9Y" als Postleitzahl in der Eingabe.