Typeahead表单操作

时间:2015-07-13 13:34:54

标签: php jquery ajax typeahead.js

我尝试进行搜索输入,用户可以在其中输入一些关键字,并自动完成数据库中的结果。

我已经完成了将搜索输入设置为自动完成并显示结果,现在唯一缺少的是,当用户按下名称时,它将重定向到该结果的页面。

在这种情况下,我需要将结果id作为参数传递给url。

HTML

<form action="" method="post">
    <input type="text" name="clients" id="clients" data-provide="typeahead">
    <input type="submit" name="clients_submit" value="Search">
</form>

的jQuery

var clients = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('client_name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: './core/views/clients.php?query=%QUERY',
        wildcard: '%QUERY'
    }
});

clients.initialize();

$("#clients").typeahead({
    hint: true,
    highlight: true,
    minLength: 2
},{
    name: 'clients',
    displayKey: 'client_name',
    source: clients.ttAdapter()
});

PHP

header('Content-Type: application/json');

if(!isset($_GET['query'])){
    echo json_encode([]);
    exit();
}

    $conn = new PDO('mysql:host=localhost;dbname=autocomplete;charset=utf8', "root", "root");
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $clients = $conn->prepare("SELECT client_id, client_name FROM crm_clients WHERE client_name LIKE :query");

    $clients->execute([
        'query' => "{$_GET['query']}%"
    ]);

    echo json_encode($clients->fetchAll());

0 个答案:

没有答案