使用ajax响应的引导式typeahead不会缩小结果

Question

我正在尝试对表单上的关键字进行类型化，我正在查看响应标头中的结果，它们正在返回整个表，而不是返回缩小的结果-这导致它（我认为）在返回所有结果之前超时。我使用的是从这两个网站上找到的带有ajax信息的typeahead：1）http://www.webmaster-source.com和2）tatiyants.com

这是jQuery/javascript部分

$('#keyword').typeahead({
            minLength: 1,
            source: function (query, process) {
                items = [];
                map = {};
                $.ajax({
                    type: 'post',
                    url: 'includes/php/get_info.php',
                    data: { type: 'keyword', q: query },
                    cache: false,
                    dataType: 'json',
                    success: function (data) {
                        $.each(data, function (i, product) {
                            map[product.keyword] = product;
                            items.push(product.keyword);
                        });
                        return process(items);
                    }
                });
            },
            updater: function (item) {
                if (jQuery.type(map[item]) !== 'undefined'){
                    //add previously used tag
                    $('#keywords').append('<div class="remove" item="'+item+'"><span class="tag">'+item+'</span><button type="button" class="close" item="'+item+'">×</button><input type="hidden" name="ci_keywords[]" value="'+item+'"></div>');
                } else {
                    //add the new tag
                    $('#keywords').append('<div class="remove" item="'+item+'"><span class="tag">'+item+'</span><button type="button" class="close" item="'+item+'">×</button><input type="hidden" name="ci_keywords[]" value="'+item+'"></div>');
                }
            },
            matcher: function (item) {
                if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
                    return true;
                }
            },
            sorter: function (items) {
                items.unshift(this.query);
                return items;
            }
        });

这是我的get_info.php

if(isset($_POST['type']) && $_POST['type'] == 'keyword') {
    $keywords = $dbh->prepare("SELECT DISTINCT `keyword` FROM `ci_keywords` WHERE `keyword` LIKE ?");
    $keywords->execute(array('%'.$_POST['query'].'%'));
    $results = $keywords->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($results);
}

我页面上的html是：

<div class="control-group">
                            <label class="control-label" for="keyword">Keywords or Phrases</label>
                            <div class="controls">
                                <input class="span4" type="text" id="keyword" placeholder="Keywords" autocomplete="off">
                                <div id="keywords" class="clearfix"></div>
                            </div>
                        </div>

所以我的问题是——为什么它会返回整个列表，而不是按照我发送的搜索词缩小范围？

Answer 1

您发送的变量名称为q:

data: { type: 'keyword', q: query },

您在PHP中检索到的变量名称是query:

$keywords->execute(array('%'.$_POST['query'].'%'));

启用错误报告将有助于避免此问题。

Answer 2

问题在于用PHP构建查询。您以q的形式发送搜索词，但以query的形式访问它。因此，将$_POST['query']更新为$_POST['q']