Mysql
 sql >> Datenbank >  >> RDS >> Mysql

Twitter Bootstrap Typeahead gibt mehrere Werte zurück und füllt das Bearbeitungsfeld aus

Wenn ich Sie richtig verstehe, erhalten Sie Ergebnisse zurück, können aber die Eingabefelder nicht ausfüllen. Obwohl ich Twitter Bootstrap Typeahead nicht verwende, mache ich etwas sehr Ähnliches mit der Autocomplete-Funktion von jQuery. Der folgende Code ist ungetestet und Sie müssen ihn natürlich selbst ändern, aber er wird hoffentlich hilfreich sein.

Sehen Sie sich diese funktionierende jsFiddle Demo an für etwas Ähnliches.

PHP

$array = array();
while ($row = mysql_fetch_assoc($sql)) {
    array_push($array,array('ContactName'=>$row['ContactName'],'Telephone'=>$row['Telephone'],'Email'=>$row['Email']));
}
echo json_encode($array);


Sie können überprüfen, was zurückgegeben wird, indem Sie die URL manuell eingeben (z. B.:yoursite/Customer.php?query=SomeContactName). Sie sollten etwas Ähnliches sehen:

[{"ContactName":"Some Contact","Telephone":"5555555555","Email":"[email protected]"},
 {"ContactName":"Some Other Contact","Telephone":"5555555555","Email":"[email protected]"}]


HTML/Javascript

<script>
    $('input.typeahead').typeahead({
        source: function (query, process) {
            $.ajax({
                url: 'Customer.php',
                type: 'POST',
                dataType: 'JSON',
                // data: 'query=' + query,
                data: 'query=' + $('#contactName').val(),
                success: function(data)
                {
                    var results = data.map(function(item) {
                        var someItem = { contactname: item.ContactName, telephone: item.Telephone, email: item.Email };
                        return JSON.stringify(someItem.contactname);
                    });
                    return process(results);
                }
            });
        },
        minLength: 1,
        updater: function(item) {
            // This may need some tweaks as it has not been tested
            var obj = JSON.parse(item);
            return item;
        }
    });
</script>

Hier sind ein paar andere Beiträge, die Sie sich vielleicht ansehen sollten:How to return the response from a AJAX anrufen? und Bootstrap-Typeahead-Ajax-Ergebnisformat – Beispiel