2016-07-11 9 views
0

マップ内のjavascriptオブジェクトと統合されたjQueryで私のマップ用の検索バーを作成しました。 。問題は、私が研究を終え、私が作ったサイドバーが消えないようにしたいということです。さらに、ユーザーが自分の街で私の店を見つけられない場合(検索は都市に基づいています)、検索ツールに「結果が見つかりませんでした」というメッセージが表示されます。場所を検索した後にGoogleマップ上の検索バーツールをクリア

$('#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); 
}); 

私の場所の1の例は次のとおりです:

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 Object、google maps、jqueryを使用して、クライアント側からいくつかのデータを取得する予定ですか?お使いのディスプレイ以来

答えて

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 

は、あなたがディスプレイを置くことができます:どれもキャンセルされることはありません、私はあなたが最初にあなたの提案が表示されていることを確認することをお勧めし、あなたの場合に行います。

+0

何も変更されていない、私は別のアプローチを試みている: 私は私の質問を更新する! –

関連する問題