2016-07-11 2 views
0

지도에서 자바 스크립트 개체와 통합되어 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); 
}); 

내 자리 중 하나의 예는 다음과 같습니다

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

:

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

은이 페이지에서 액션에서 내 응용 프로그램을 볼 수 있습니다

업데이트 :

그것은 여전히 ​​작동하지

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

하지만 장소를 검색 한 후 사람이, 다른 장소 (이 경우 다른 도시를) 찾을 때 점이며 : 6,

나는 다른 접근 방식을 시도하고있다 그는 이전 검색을 삭제합니다 (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

아무 것도 변경되지 않았습니다. 다른 접근 방식을 시도하고 있습니다. 내 질문을 업데이트합니다! –

관련 문제