Question

我构建了一个很好的工具，以便在google地图上找到我的商店，从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

你只需要一个＆＃34;标志＆＃34;确定是否没有找到结果...
为了阻止这个＆＃34;重复没有结果发现提及＆＃34;过循环迭代。

AND 放置此＆＃34;未找到任何结果＆＃34;超出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);
});

尝试使用＆＃34; L9Y＆＃34;作为输入中的邮政编码。

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

1 个答案: