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

Question

我在 jQuery 中为我的地图构建了一个搜索栏，它与地图中的 javascript 对象集成在一起，以便显示我在地图中指示的每个地点作为标记。问题是，当我完成研究并想开始另一个研究时，我创建的侧边栏不会消失。另外，我希望当用户在他的城市找不到我的商店时（我的搜索基于城市），我的搜索工具会显示 "No results were found" 消息。

到目前为止我的代码是：

$('#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 地图和 jquery 以便从客户端检索一些数据？

Answer 1

由于您的 display:none 从未被取消，我建议您首先确保您的建议可见，然后执行您的 if:

$('#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 放在成功部分。

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

Clear search bar tool on google map after having searched for a place

search

jquery

google-maps

javascript-objects