Twitter Bootstrap Typeahead Ajax Beispiel

Ich versuche, ein funktionierendes Beispiel für das typeahead- Element des Twitter-Bootstraps zu finden , das einen Ajax-Aufruf ausführt , um das Dropdown-Menü zu füllen.

Ich habe ein vorhandenes Beispiel für die automatische Vervollständigung von JQuerys, in dem die Ajax-URL für und die Verarbeitung der Antwort definiert sind

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { minChars:3, max:20 };
    $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

Was muss ich ändern, um dies in das Typeahead-Beispiel zu konvertieren?

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { source:'/index/runnerfilter/format/html', items:5 };
    $("#runnerquery").typeahead(options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

Ich werde warten, bis das Problem " Unterstützung für Remotequellen für Typeahead hinzufügen " behoben ist.

Bearbeiten: typeahead ist in Bootstrap 3 nicht mehr enthalten. Check out:

• Wo befindet sich das typeahead JavaScript-Modul in Bootstrap 3 RC 1?
• typeahead.js

Ab Bootstrap 2.1.0 bis 2.3.2 können Sie Folgendes tun:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            return process(data.options);
        });
    }
});

So verwenden Sie JSON-Daten wie folgt:

{
    "options": [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
        "Option 5"
    ]
}

Beachten Sie, dass die JSON-Daten vom richtigen MIME-Typ (application / json) sein müssen, damit jQuery sie als JSON erkennt.

Sie können die BS Typeahead-Gabel verwenden, die Ajax- Aufrufe unterstützt. Dann können Sie schreiben:

$('.typeahead').typeahead({
    source: function (typeahead, query) {
        return $.get('/typeahead', { query: query }, function (data) {
            return typeahead.process(data);
        });
    }
});

Ab Bootstrap 2.1.0:

HTML:

<input type='text' class='ajax-typeahead' data-link='your-json-link' />

Javascript:

$('.ajax-typeahead').typeahead({
    source: function(query, process) {
        return $.ajax({
            url: $(this)[0].$element[0].dataset.link,
            type: 'get',
            data: {query: query},
            dataType: 'json',
            success: function(json) {
                return typeof json.options == 'undefined' ? false : process(json.options);
            }
        });
    }
});

Jetzt können Sie einen einheitlichen Code erstellen und "json-request" -Links in Ihren HTML-Code einfügen.

Alle Antworten beziehen sich auf BootStrap 2 typeahead, das in BootStrap 3 nicht mehr vorhanden ist.

Für alle anderen, die hier Regie führen und nach einem AJAX-Beispiel mit dem neuen Post-Bootstrap- Twitter typeahead.js suchen , ist hier ein funktionierendes Beispiel. Die Syntax ist etwas anders:

$('#mytextquery').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  limit: 12,
  async: true,
  source: function (query, processSync, processAsync) {
    processSync(['This suggestion appears immediately', 'This one too']);
    return $.ajax({
      url: "/ajax/myfilter.php", 
      type: 'GET',
      data: {query: query},
      dataType: 'json',
      success: function (json) {
        // in this example, json is simply an array of strings
        return processAsync(json);
      }
    });
  }
});

In diesem Beispiel werden sowohl synchrone (der Aufruf von processSync ) als auch asynchrone Vorschläge verwendet, sodass einige Optionen sofort angezeigt werden und andere hinzugefügt werden. Sie können einfach das eine oder andere verwenden.

Es gibt viele bindbare Ereignisse und einige sehr leistungsstarke Optionen, einschließlich der Arbeit mit Objekten anstelle von Zeichenfolgen. In diesem Fall würden Sie Ihre eigene benutzerdefinierte Anzeigefunktion verwenden, um Ihre Elemente als Text zu rendern.

Ich habe das ursprüngliche typeahead Bootstrap-Plugin mit Ajax-Funktionen erweitert. Sehr einfach zu bedienen:

$("#ajax-typeahead").typeahead({
     ajax: "/path/to/source"
});

Hier ist das Github-Repo: Ajax-Typeahead

Ich habe einige Änderungen an der jquery-ui.min.js vorgenommen:

//Line 319 ORIG:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").appendTo(d(...
// NEW:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").addClass("typeahead").addClass("dropdown-menu").appendTo(d(...

// Line 328 ORIG:
this.element.addClass("ui-menu ui-widget ui-widget-content ui-corner-all").attr...
// NEW:this.element.attr....

// Line 329 ORIG:
this.active=a.eq(0).children("a")
this.active.children("a")
// NEW:
this.active=a.eq(0).addClass("active").children("a")
this.active.removeClass("active").children("a")`

und füge folgendes CSS hinzu

.dropdown-menu {
    max-width: 920px;
}
.ui-menu-item {
    cursor: pointer;        
}

Funktioniert perfekt.

Ich benutze diese Methode

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
    {
    name: 'options',
    displayKey: 'value',
    source: function (query, process) {
        return $.get('/weather/searchCity/?q=%QUERY', { query: query }, function (data) {
            var matches = [];
            $.each(data, function(i, str) {
                matches.push({ value: str });
            });
            return process(matches);

        },'json');
    }
});

Mit Bootstrap kann man telefonieren. Die aktuelle Version weist keine Probleme mit der Quellaktualisierung auf. Probleme beim Aktualisieren der typeahead-Datenquelle von Bootstrap mit Post-Response , dh die Quelle des einmal aktualisierten Bootstraps kann erneut geändert werden.

Ein Beispiel finden Sie weiter unten:

jQuery('#help').typeahead({
    source : function(query, process) {
        jQuery.ajax({
            url : "urltobefetched",
            type : 'GET',
            data : {
                "query" : query
            },
            dataType : 'json',
            success : function(json) {
                process(json);
            }
        });
    },
    minLength : 1,
});

Für diejenigen, die nach einer Coffeescript-Version der akzeptierten Antwort suchen:

$(".typeahead").typeahead source: (query, process) ->
  $.get "/typeahead",
    query: query
  , (data) ->
    process data.options

Ich habe diesen Beitrag durchgesehen und alles wollte nicht richtig funktionieren und habe schließlich die Bits aus ein paar Antworten zusammengesetzt, sodass ich eine 100% funktionierende Demo habe und sie hier als Referenz einfügen werde - füge sie in eine PHP-Datei ein und stelle sicher, dass sie enthalten sind der richtige Ort.

<?php if (isset($_GET['typeahead'])){
    die(json_encode(array('options' => array('like','spike','dike','ikelalcdass'))));
}
?>
<link href="bootstrap.css" rel="stylesheet">
<input type="text" class='typeahead'>
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('index.php?typeahead', { query: query }, function (data) {
            return process(JSON.parse(data).options);
        });
    }
});
</script>

Versuchen Sie dies, wenn Ihr Dienst nicht den richtigen Header für den Anwendungs- / JSON-Inhaltstyp zurückgibt:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            var json = JSON.parse(data); // string to json
            return process(json.options);
        });
    }
});

UPDATE: Ich änderte meinen Code mit dieser Gabel

Anstatt $ .each zu verwenden, habe ich auch zu $ ​​.map gewechselt, wie von Tomislav Markovski vorgeschlagen

$('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data, item){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'name',
    items:11,
    onselect: function (obj) {

    }
});

Ich stoße jedoch auf einige Probleme, wenn ich bekomme

Nicht gefangener TypeError: Die Methode 'toLowerCase' von undefined kann nicht aufgerufen werden

Wie Sie in einem neueren Beitrag sehen können, versuche ich hier herauszufinden

Ich hoffe, dieses Update hilft Ihnen weiter ...

Ich habe weder ein funktionierendes Beispiel für Sie noch eine sehr saubere Lösung, aber lassen Sie mich Ihnen sagen, was ich gefunden habe.

Wenn Sie sich den Javascript-Code für TypeAhead ansehen, sieht er folgendermaßen aus:

items = $.grep(this.source, function (item) {
    if (that.matcher(item)) return item
  })

Dieser Code verwendet die jQuery-Methode "grep", um ein Element im Quellarray abzugleichen. Ich habe keine Orte gesehen, an denen Sie einen AJAX-Anruf einbinden könnten, daher gibt es dafür keine "saubere" Lösung.

Eine etwas hackige Möglichkeit, dies zu tun, besteht darin, die Funktionsweise der grep-Methode in jQuery zu nutzen. Das erste Argument für grep ist das Quellarray, und das zweite Argument ist eine Funktion, die zum Abgleichen des Quellarrays verwendet wird (beachten Sie, dass Bootstrap den "Matcher" aufruft, den Sie bei der Initialisierung angegeben haben). Sie können die Quelle auf ein Dummy-Array mit einem Element setzen und den Matcher als Funktion mit einem AJAX-Aufruf definieren. Auf diese Weise wird der AJAX-Aufruf nur einmal ausgeführt (da Ihr Quellarray nur ein Element enthält).

Diese Lösung ist nicht nur hackig, sondern leidet auch unter Leistungsproblemen, da der TypeAhead-Code so konzipiert ist, dass er bei jedem Tastendruck nachschlägt (AJAX-Aufrufe sollten eigentlich nur alle paar Tastenanschläge oder nach einer bestimmten Leerlaufzeit erfolgen). Mein Rat ist, es zu versuchen, aber entweder bei einer anderen Autocomplete-Bibliothek zu bleiben oder diese nur für Nicht-AJAX-Situationen zu verwenden, wenn Sie auf Probleme stoßen.

Versuchen Sie bei der Verwendung von Ajax, $.getJSON()anstatt $.get()Probleme mit der korrekten Anzeige der Ergebnisse zu haben.

In meinem Fall habe ich bei meiner Verwendung nur das erste Zeichen jedes Ergebnisses erhalten $.get(), obwohl ich json_encode()serverseitig verwendet habe .

Ich benutze, $().one() um dies zu lösen. Wenn die Seite geladen ist, sende ich Ajax an den Server und warte, bis es fertig ist. Übergeben Sie dann das Ergebnis an die Funktion. $().one()ist wichtig. Weil typehead.js gezwungen wird, einmal an die Eingabe anzuhängen. Entschuldigung für das schlechte Schreiben.

(($) => {
    
    var substringMatcher = function(strs) {
        return function findMatches(q, cb) {
          var matches, substringRegex;
          // an array that will be populated with substring matches
          matches = [];
      
          // regex used to determine if a string contains the substring `q`
          substrRegex = new RegExp(q, 'i');
      
          // iterate through the pool of strings and for any string that
          // contains the substring `q`, add it to the `matches` array
          $.each(strs, function(i, str) {
            if (substrRegex.test(str)) {
              matches.push(str);
            }
          });
          cb(matches);
        };
      };
      
      var states = [];
      $.ajax({
          url: 'https://baconipsum.com/api/?type=meat-and-filler',
          type: 'get'
      }).done(function(data) {
        $('.typeahead').one().typeahead({
            hint: true,
            highlight: true,
            minLength: 1
          },
          {
            name: 'states',
            source: substringMatcher(data)
          });
      })
      

})(jQuery);

.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
}

.tt-suggestion:hover {
    color: #f0f0f0;
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<input class="typeahead" type="text" placeholder="where ?">

 $('#runnerquery').typeahead({
        source: function (query, result) {
            $.ajax({
                url: "db.php",
                data: 'query=' + query,            
                dataType: "json",
                type: "POST",
                success: function (data) {
                    result($.map(data, function (item) {
                        return item;
                    }));
                }
            });
        },
        updater: function (item) {
        //selectedState = map[item].stateCode;

       // Here u can obtain the selected suggestion from the list


        alert(item);
            }

    }); 

 //Db.php file
<?php       
$keyword = strval($_POST['query']);
$search_param = "{$keyword}%";
$conn =new mysqli('localhost', 'root', '' , 'TableName');

$sql = $conn->prepare("SELECT * FROM TableName WHERE name LIKE ?");
$sql->bind_param("s",$search_param);            
$sql->execute();
$result = $sql->get_result();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
    $Resut[] = $row["name"];
    }
    echo json_encode($Result);
}
$conn->close();

?>