twitter bootstrap typeahead ajax Beispiel

Edit: typeahead ist nicht mehr gebündelt in Bootstrap 3. Check-out:

• Wo ist die typeahead JavaScript-module in Bootstrap 3 RC 1?
• typeahead.js

Als der Bootstrap 2.1.0 bis zu 2.3.2, können Sie dies tun:

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

Konsumieren von JSON-Daten wie diese:

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

Beachten Sie, dass die JSON-Daten muss der richtige mime-type (application/json) so jQuery erkennt es als JSON.

InformationsquelleAutor der Antwort Stijn Van Bael

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);
            }
        });
    }
});

Nun können Sie einen unified-code, indem Sie "json-request" - links in Ihren HTML-code.

InformationsquelleAutor der Antwort Thantifaxath

Habe ich ergänzt die original Bootstrap typeahead-plugin mit ajax-Funktionen. Sehr einfach zu bedienen:

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

Hier ist der github-repo: Ajax-Typeahead

InformationsquelleAutor der Antwort Paul Warelis

Kann man Anrufe tätigen, durch die Verwendung von Bootstrap. Die aktuelle version nicht hat jedem source-update-Probleme
Probleme mit der Aktualisierung Bootstrap - typeahead-Daten-Quelle mit post-Antwort
, d.h. die Quelle der bootstrap-nach dem Update kann wieder geändert.

Bitte siehe unten für ein Beispiel:

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,
});

InformationsquelleAutor der Antwort neoeahit

Ging ich durch diesen post und alles nicht wollen, um korrekt zu arbeiten, und schließlich setzte der bits zusammen, die aus ein paar Antworten, damit ich eine 100% funktionsfähige demo und füge Sie hier für die Referenz - paste diese in eine php-Datei und stellen Sie sicher, gehört am richtigen Ort sind.

<?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>

InformationsquelleAutor der Antwort l0ft13

UPDATE: ich habe meine modifizierten code mittels diese Gabel

auch statt mit $.jeder wechselte ich in $.anzeigen wie vorgeschlagen von Tomislav Markovski

$('#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) {

    }
});

Jedoch bin ich auf einige Probleme, die durch die erste

Uncaught TypeError: Cannot call method 'toLowerCase' undefined

wie Sie sehen können auf einem neueren post bin ich versucht, herauszufinden, hier

hoffe, das update ist von jeder Hilfe...

InformationsquelleAutor der Antwort mmoscosa

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

Wenn man sich den javascript code für die TypeAhead sieht es wie folgt aus:

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

Dieser code verwendet die jQuery - "grep" - Methode übereinstimmen, ein element im Quell-array. Ich wollte nicht sehen, alle Orte, die Sie könnten Haken in einem AJAX-Aufruf, so dass es nicht eine "saubere" Lösung.

Jedoch eine etwas hacky Weise, die Sie tun können, diese zu nutzen, ist die Möglichkeit der grep-Methode funktioniert bei jQuery. Das erste argument von grep ist das Quell-array und das zweite argument ist eine Funktion, die benutzt, um die source-array (Hinweis Bootstrap ruft die "matcher", die Sie bei der Initialisierung). Was Sie tun könnten, ist die Quelle auf einen dummy ein-element-array definieren und die matcher eine Funktion mit AJAX-call. So, laufen wird der AJAX-Aufruf nur einmal (seit Ihr Quell-array nur ein element hat).

Diese Lösung ist nicht nur hacky, aber es wird leiden unter performance-Problemen, da die TypeAhead-code ist entworfen, um zu tun eine Suche auf jeder Taste drücken (AJAX-Aufrufe sollte eigentlich nur passieren, alle paar Tastenanschläge oder nach einer gewissen idle-Zeit). Mein Rat ist, es zu versuchen, aber bleiben Sie entweder zu einer anderen AutoVervollständigen-Bibliothek oder nutzen diese nur für nicht-AJAX-Situationen, wenn Sie auf Probleme stoßen.

InformationsquelleAutor der Antwort Aamer Abbas

 $('#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();

?>

InformationsquelleAutor der Antwort Mohamed Ayed