Bootstrap 3 - dropdown-Suchergebnisse unter der Texteingabe

Ich habe eine text-Eingabe in ein Navigations-bar in bootstrap 3 framework.

<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Title</a>
    </div>
    <div class="navbar-collapse collapse">
      <div class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" placeholder="Search..." id="search" class="form-control" />
        </div>
        <a href="#" class="btn btn-success">Contact</a>
      </div>
    </div>
  </div>
</div>

Hier ist das jsfiddle: http://jsfiddle.net/KKm3M/1/

Was mein text-input nicht getroffen wird die Datenbank für die Ergebnisse der Suche auf Tastendruck. Es funktioniert gut, getestet habe ich es werfen die Ergebnisse in eine temporäre div anderswo.

Nun würde ich gerne diese Ergebnisse erscheinen in einer drop-down-Menü unter dem text-Eingabe. Die drop-down-anzeigen sollten so bald wie erste Ergebnisse werden aus dem backend. Habe versucht, die Suche für snippets, aber kläglich gescheitert. Wie kann ich dies tun?

Was du suchst ist Auto-vervollständigen, denke ich. Check out http://twitter.github.io/typeahead.js/, a Twitter jQuery-Bibliothek für AutoVervollständigen
Vielen Dank, aber ich bin noch weit Weg von zu Hause. Nur darunter typehead.js völlig verwirrt mein Eingabefeld und macht es unempfänglich für die $("#Suche") Selektor. Vielleicht könnte jemand mir helfen mit ein snippet?
Versuchen Sie, Lesen Sie die Dokumentation zunächst auf GitHub. Sie erklären, wie, um loszulegen. Wenn Sie immer noch finden, selbst in Schwierigkeiten, bitte, bitte, bitte einen neuen Kommentar.
Gestern versucht und versuchen heute, und nichts...
Sie können die jquery ul jqueryui.com/autocomplete/#remote AutoVervollständigen-Recht.

InformationsquelleAutor gwaramadze | 2013-12-17

  1. 13

    Könnten Sie datalists:

    <label for="something">
    Input "Something": 
    <input id="something" list="somethingelse">
    <datalist id="somethingelse">
        <option value="Something"></option>
        <option value="Something Else"></option>
        <option value="Another One"></option>
        <option value="Alpha"></option>
        <option value="Bravo"></option>
        <option value="Charlie"></option>
        <option value="Delta"></option>
        <option value="Echo"></option>
        <option value="Foxtrot"></option>
        <option value="Gamma"></option>
    </datalist>
</label>

    Browser-Unterstützung wächst (caniuse).

    Hier ist ein Beispiel für Ihre Verwendung.

    Auch wenn dies nichts war, das ich brauchte, oder auch war suchen; ich Liebe, wie hast du es gemacht ohne den Einsatz von JS überhaupt. +1 für dich, mein Freund.

    InformationsquelleAutor Alexander Holman

Schreibe einen Kommentar