Twitter bootstrap typeahead returnerer flere værdier og udfylder redigeringsfeltet

Hvis jeg forstår dig rigtigt, får du resultater tilbage, men du kan ikke udfylde inputfelterne. Selvom jeg ikke bruger Twitter Bootstrap typeahead, gør jeg noget meget lignende med jQuerys autofuldførelsesfunktion. Koden nedenfor er ikke testet, og du skal selvfølgelig selv ændre den, men forhåbentlig vil den være til hjælp.

Se denne fungerende jsFiddle demo for noget lignende.

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

Du kan kontrollere, hvad der returneres ved manuelt at indtaste URL'en (f.eks. dit websted/Customer.php?query=SomeContactName). Du burde se noget lignende dette:

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

Her er et par andre indlæg, som du måske vil tage et kig på Sådan returnerer du svaret fra en AJAX ringe? og Bootstrap typeahead ajax resultatformat – Eksempel