如果 .search 方法等于 -1，则停止 jquery 迭代

Question

我构建了一个很好的工具，以便在 google 地图上找到我的商店，该地图从 javascript 对象迭代每个位置。当我的 .search 函数找不到任何结果时，我需要一个 "no search result"。问题是我的代码无论如何都会遍历每个位置，因此它会为我的所有位置创建多个文本。无论如何要解决这个问题？这是我的代码：

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

和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

我理解你的问题，它是最小的、完整的和可验证的。
;)

看我的CodePen here

只需要一个"flag"判断是否没有找到结果...
为了阻止此 "repetitive no result found mention" 循环迭代。

AND 将此 "no result found" 置于 each() 循环之外。

修改后的代码部分如下：

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

尝试在输入中使用 "L9Y" 作为邮政编码。

如果 .search 方法等于 -1，则停止 jquery 迭代

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

iteration

search

jquery

google-maps

javascript-objects