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

Question

我构建了一个很好的工具，以便在谷歌地图上找到我的商店，该地图从 javascript 对象中迭代每个位置。当我的 .search 函数找不到任何结果时，我需要一个“无搜索结果”。问题是我的代码无论如何都会对每个位置进行迭代，因此它将为我的所有位置创建多个文本。有没有办法解决这个问题？这是我的代码：

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

您只需要一个“标志”来确定是否未找到任何结果...
为了在循环迭代中阻止这种“重复未找到结果提及”。

AND 将此“未找到结果”置于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”作为邮政编码。