CODEWITHSUNDEEP
phpjquerymysqlbootstrap-typeahead
JK87
JK87

Reputation: 379

Using Bootstrap's Typeahead to populate a form with values from a MySQL database

Is there a way to achieve this with Bootstrap's Typeahead and MySQL?

MY FORM (name, adress, city)

       <label>Naam:</label>
             <input type="text" name="naam" placeholder="Typ hier een naam..." /><br /> 

        <label>Adres:</label>
            <input type="text" name="adres" placeholder="Typ hier het adres..." /><br />

        <label>Plaats:</label>
            <input type="text" name="plaats" placeholder="Typ hier de plaats..." /><br />

When I fill in my Naam (name) input field I want to use typeahead to give suggestions from my database and when I pick one of these suggestions, the other fields (Adres and plaats) need to be filled with the corresponding values of the name field from the database..

Like so:

enter image description here

To create a suggestion like above, I use this:

    $query = mysql_real_escape_string($_POST['query']);

$sql = mysql_query("SELECT CONCAT(naam, ' - ', adres, ', ', plaats) as result FROM klanten WHERE naam like '%{$query}%' or plaats like '%{$query}%'");
$array = array();

while ($row = mysql_fetch_assoc($sql)) {
    $array[] = $row['result'];  
}

// Return the json array
echo json_encode($array);

Then when I click the suggestion, the rule "Johnson - Wallstreet 1234, New York" has to be cut in pieces. Like the output example in the image..

Upvotes: 0

Views: 2296

Answers (1)

Ananth
Ananth

Reputation: 4397

First give an id to your name textbox.

<input type="text" name="naam" placeholder="Typ hier een naam..." id="naam" /><br />

Javascript:

$('#naam').typeahead({
    source: function (typeahead, query) {
        return $.get('/ajaxurl_to_get_suggestions', { query: query }, function (data) {
            return typeahead.process(data);
        });
    },
    updater: function (selectedItem) {
        $.ajax({
            url: '/get_other_parameters',
            type: 'GET',
            data: 'name=' + selectedItem,
            success: function(data) {
                // process returned data
            }
        })
    }
});

The /ajaxurl_to_get_suggestions must output the suggestions in json format.

Upvotes: 1

Related Questions