2014-03-04 3 views
0

나는지도 기반 웹 응용 프로그램에서 작업 중입니다.제안에 대한 제안 검색

검색 제안 기능을 계획 방향의 입력 인 <input type="text" />에 구현하고 싶습니다.

jQuery의 keyup event에 Google지도와 같은 방식으로 검색 제안을 표시하고 싶습니다. 이것은 지금까지 내 코드입니다

:

HTML

<input type="text" name="waypoints[]" id="waypoint-1" class="waypoint" /> 

기본 jQuery를의 keyup 이벤트 핸들러

$('.waypoint').on('keyup', function() { 

}); 

그리고 여기 documentation에서 발견 사용해야합니까 코드, 그리고 the api explorer

var searchBox = new nokia.places.widgets.SearchBox ({ 
    targetNode: 'waypoint-1', 
    searchCenter: function() { 
     return { 
      latitude: 52.516274, 
      longitude: 13.377678 
     } 
    }, 
    onResults: function (data) { 
     console.log(data.results.items); 
    } 
}); 

사용자가 키를 놓을 때마다 추천 검색어를 표시하려면 어떻게해야합니까? 해당 이벤트에 응답하려면 SearchBox의 코드를 내 이벤트 처리기에 넣어야합니까? searchCenter 매개 변수는 무엇입니까?

답변

1

자바 스크립트 SearchBox은 올인원 위젯으로 작동 할 수 있으므로 키 누르기를 처리하기 위해 추가 이벤트를 추가 할 필요가 없습니다. 표시된대로 초기화 할 수 있지만 targetNode<DIV>id과 DOM이 이미 일치해야합니다. 당신이

<div id="waypoint1" class="main-search"> 
    <span class ="caption">Start:</span> 
    <div module="SearchBox"> 
    <input rel="searchbox-input" class="search-box-bckgrnd" type="text" /> 
    <div rel="searchbox-list" class="search-list"></div> 
    </div> 
</div> 

실제로 동작하는 라우팅 예를

HERE Maps Community Examples에서 찾을 수 있습니다 다음과 같습니다 경우 예 : 당신은 targetNode = waypoint1를 사용할 수 있습니다.

searchCenter은 검색의 위치 컨텍스트를 정의하는 데 도움이됩니다. 자세한 내용은 RESTful Places Documentation에 설명되어 있습니다. 구체적으로는 at 매개 변수에 매핑됩니다. 또 다른 대안은 연결된 맵에 위젯을 첨부하여 대신 in 매개 변수를 제공하는 것입니다. 위젯은 최소한 3자를 입력 한 후에 만 ​​제안을 시작합니다.

물론 JQuery를 사용하여 자신 만의 위젯을 만들 수 있습니다. 키 업을 사용하고 suggest endpoint을 사용하여 REST 요청을 작성한 다음 결과 문자열 배열을 원하는 드롭 다운으로 파싱하십시오.

+0

완벽하니, 이것이 내가 찾고 있었던 것이다. 고마워요! 안타깝게도 여기서 Maps의 문서에는 많은 개선의 여지가 있습니다. – PeterInvincible

관련 문제