使用Bootstrap的Typeahead使用MySQL数据库中的值填充表单

Question

有没有办法用Bootstrap的Typeahead和MySQL实现this？

我的表格（姓名，地址，城市）

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

当我填写我的Naam（名称）输入字段时，我想使用typeahead来提供来自我的数据库的建议，当我选择其中一个建议时，其他字段（Adres和plaats）需要填充相应的值来自数据库的名称字段..

像这样：

要创建如上所述的建议，我使用此：

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

然后，当我点击建议时，规则“约翰逊 - 华尔街1234，纽约”必须被切成碎片。就像图像中的输出示例..

Answer 1

首先为您的姓名文本框添加一个ID。

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

/ ajaxurl_to_get_suggestions必须以json格式输出建议。