jquery marcopolo를 사용하여 자동 완성 구현하는 방법

Question

자동 완성을 수행하는 jquery 플러그인 인 marcopolo를 구현하려고합니다.

다음은 두 가지 문제입니다.

1) 한 글자 또는 단어를 입력하면 "방향"에 대한 모든 값이 올바르지 않습니다. 예를 들어, "Up"을 검색하면 두 글자가있는 단어가 나타납니다.

2) 사용자가 '위로'를 검색하고 입력 버튼을 누르거나 제출 버튼을 누르면 해당 단어와 연결된 URL로 이동해야합니다.

Github에서 참조 : https://github.com/jstayton/jquery-marcopolo
마르코 폴로 예 : 여기 http://jstayton.github.io/jquery-marcopolo/example1.html

그리고 내 codepen입니다 : http://codepen.io/anon/pen/rrwgwJ

HTML

<input type="text" name="autoCom" id="autoCom"><input type="submit" class="send"> 

CSS

ol {position: absolute; top: 20px;} 
ol.mp_list {list-style-type: none;} 

JS

$(function(){ 

$('#autoCom').marcoPolo({ 
     url: 'https://api.myjson.com/bins/ygdk', 
     minChars: 1, 
     submitOnEnter: true, 
      formatData: function (data) { 
       return data; //possible issue 
      }, 
     formatItem: function (data, $item) { 
      return data.Direction; 
      }, 
      onSelect: function (data, $item) { 
     //window.location = data.URL; 
     this.val(data.Direction); 
     window.open(data.URL,'_blank'); 
      } 
    }); 

}); 

도움을 주셔서 감사합니다.

Answer 1

<input/> 요소의 내용으로 "q"변수를 보내고 있지만 JSON 응답으로 구성한 페이지가 "q"변수로 필터링하지 않는 것이므로 문제가 발생하지 않습니다. 같은 결과.

[{"Direction":"Up","URL":"http://www.google.com"},{"Direction":"Left","URL":"http://www.cnn.com"},{"Direction":"Right","URL":"http://www.engadget.com"},{"Direction":"Down","URL":"http://www.twitter.com"},{"Direction":"Upward","URL":"http://www.facebook.com"},{"Direction":"Leftwing","URL":"http://www.snapfish.com"},{"Direction":"Rightwing","URL":"http://www.gizmodo.com"},{"Direction":"Downward","URL":"http://www.fox.com"}]