Marco Maffei Marco Maffei - 4 months ago 10
jQuery Question

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

I built a nice tools in order to find my store on a google maps which iterate every location from a javascript object. I need a "no search result" when my .search function won't find any result. The problem is that my code will iterate with every location anyway, so it will create a multiple text for all of my locations. Is there anyway to fix this problem? Here is it my 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 the 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>


UPDATE:

If you want to have a look on the tool in action have a look on the website:

https://choosechickapea.com/shop-chickapea/

Answer

I understood your problem, which was Minimal, Complete, and Verifiable.
;)

See my CodePen here

You only need a "flag" to determine if no result was found...
In order to block this "repetitive no result found mention" over loop iterations.

AND to place this "no result found" out of the each() loop.

Here is the 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 with "L9Y" as postal code in the input.