So implementieren Sie die automatische Vervollständigung mit jquery marcopolo

Question

Ich versuche, Marcopolo zu implementieren, die ein JQuery-Plug-in ist, um automatisch abzuschließen.

Hier sind meine zwei Fragen.

1) Wenn ich einen einzelnen Buchstaben oder ein Wort eintippe, werden alle Werte für "Direction" angezeigt, was nicht korrekt ist. Ich möchte zum Beispiel, wenn ich nach "Up" suche, irgendwelche Wörter mit diesen zwei Buchstaben erscheinen.

2) Wenn ein Benutzer nach "Up" sucht und er die Eingabetaste drückt oder auf die Senden-Schaltfläche klickt, sollte er zu der mit diesem Wort verknüpften URL weitergeleitet werden.

Github Referenz: https://github.com/jstayton/jquery-marcopolo
Marcopolo Beispiel: http://jstayton.github.io/jquery-marcopolo/example1.html

Und hier ist mein 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'); 
      } 
    }); 

}); 

Vielen Dank für Ihre Hilfe!

Answer 1

Das Problem ist, dass Sie die Variable "q" mit dem Inhalt des Elements <input/> senden, aber die Seite, die Sie als eine JSON-Antwort konfiguriert ist nichts mit dieser "q" Variable filtern, so werden Sie immer erhalten das gleiche Ergebnis.

[{"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"}]