搜索地点后，清除Google地图上的搜索栏工具

Question

我在jQuery中为我的地图构建了一个搜索栏，该搜索栏与地图中的javascript对象集成在一起，以便将我在地图中指示的每个位置显示为标记。 问题是，当我完成研究并且想开始另一个研究时，创建的侧边栏不会消失。 另外，当用户在所在城市找不到我的商店时（我的搜索基于城市），我希望搜索工具会显示“未找到结果”消息。

到目前为止，我的代码是：

$('#geocomplete').keyup(function() {
    var searchField = $('#geocomplete').val();
    var myExp = new RegExp(searchField, "i");
    var output = '<div class="searchresults">';
    if (searchField.length == 0) {
        $("#legend").append("<p>No results were found.</p>");
        $(".searchresults").css("display", "none");
    } else {
        $.each(markers, function(key, markers) {
            if (markers.city.search(myExp) != -1) {
                output += '<div>';
                output += '<h2>'+ markers.city +'</h2>';
                output += '<div>'+ markers.html +'</div>';
                output += '</div>';
            }
        });
    }
    output += '</div>';
    $('#legend').html(output);
});

我的其中一个例子是：

var markers = [
{
    "html": '<some html></some html>',
    "title": 'The place',
    "lat": '44.501345',
    "lng": '-80.215064',
    "city": 'Collingwood'
}..

您可以在此页面上看到我的应用程序的运行情况：

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

更新：

我正在尝试另一种方法：

$('#geocomplete').keyup(function() {
    // get the value insert by the client
    var searchField = $('#geocomplete').val();
    // regular expression to ignore upper or lower case
    var myExp = new RegExp(searchField, "i");
    // create a div where to append the results
    var output = '<div class="searchresults">';
    // display the result by default
    $(".searchresults").css("display", "block");
    // loop through the results
    $.each(markers, function(key, markers) {
        // in the case the client after the research, want to find another city and he will start from the beggining in that case delete the div and display a no search found message
        if (markers.city.search(myExp) == -1) {
            $(".searchresults").append("<p class='noresults'>No results were found.</p>");
            $(".searchresults").css("display", "none");
        } else {
            // in the other cases display the results
            output += '<div>';
            output += '<h2>'+ markers.city +'</h2>';
            output += '<div>'+ markers.html +'</div>';
            output += '</div>';
        }
    });
    output += '</div>';
    $('#legend').html(output);
});

它仍然不起作用，但关键是有人在搜索了某个地方之后想要找到另一个地方（在这种情况下为另一个城市），并且他将删除之前的搜索（search = -1），而我想删除我为搜索创建的div或想显示“未找到结果”消息。

使用过此特定API的人吗？ Javascript对象，google maps和jquery以便从预期的客户端检索一些数据？

Answer 1

由于您的display：none不会被取消，因此建议您首先确保您的建议可见，然后执行以下操作：

$('#geocomplete').keyup(function() {
    // your init stuff

    // ensure that your results are visible by default
    $(".searchresults").css("display", "block");

    if (searchField.length == 0) {
        // your fail stuff
    } else {
        // your success stuff

或者，您可以将display：block放在成功部分中。