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对象，谷歌地图和jquery，以便从客户端前瞻性地检索一些数据？

Answer 1

由于您的显示：无从未取消，我建议您首先确保您的建议可见，然后执行以下操作：

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

搜索完地点后，在谷歌地图上清除搜索栏工具

1 个答案: