Bootstrap typeahead with ajax response not narrowing results

Question

I'm trying to have a typeahead for keywords on a form and I'm looking at the results in the response header and they are returning the whole table rather than returning the narrowed results - which is causing it (I think) to timeout before returning all the results. I'm using the typeahead with ajax info I found from these two sites: 1) http://www.webmaster-source.com and 2) tatiyants.com

Here is the jQuery/javascript part

$('#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;
            }
        });

Here is my 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);
}

the html on my page is:

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

So my question - Why is it returning the entire list rather than narrowing by the search term I send?

Answer 1

Variable name you send is q :

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

Variable name you retrieve in PHP is query :

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

Turning on error reporting would help you avoid this issue.

Answer 2

The issue is with constructing your query in PHP. You are sending the search term as q but accessing it as query . So update $_POST['query'] to $_POST['q']