让 Typeahead.js 使用 Fat Free Framework

Question

我正在尝试让 twitter typeahead.js 与我的 Fat Free Framework 设置一起使用，但到目前为止失败了。

我在 SearchController 中的 PHP 代码：

function itemsearch($f3){ // search


    $query = filter_var($f3->get('PARAMS.string'), FILTER_SANITIZE_STRING); 
    $db=$f3->get('DB');


        $result = $db->exec("
        SELECT * FROM items 
        WHERE itemName LIKE '%$query%'

        ");

        echo json_encode($result);
}

我的路线：

$f3->route('GET /search/item/@string','SearchController->itemsearch');

如果我直接通过浏览器调用此路由，我的查询会得到一个很好的 json 结果。

我的HTML / jquery:

$(document).ready(function(){

var items = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {

        url: '{{@BASE}}/search/item/$QUERY',
        filter: function (items) {

            return $.map(items.results, function (item) {
                return {
                    value: item.itemName
                };
            });
        }
    }
});



items.initialize();


$('.typeahead').typeahead(null, {
    displayKey: 'value',
    source: items.ttAdapter()
});
});

如果我将此代码与 url 替换为测试 url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e' 我会得到很好的预输入结果，但是我自己的 URL (在上面的代码中）没有任何反应。

我怎样才能让它与 Fat Free Framework 一起工作？

Answer 1

看来我犯了一个简单的错误，文档对此并不清楚：

$('.typeahead').typeahead(null, {
displayKey:'value',
source: items.ttAdapter()
});

应该是

$('.typeahead').typeahead(null, {
displayKey:'itemName',
source: items.ttAdapter()
});

因此 displayKey 值应该是您在 json 结果中搜索的 'item'。在我的例子中，json 返回了

itemName:whatever

所以我的 displayKey 值应该是 itemName 以便显示值 whatever

让 Typeahead.js 使用 Fat Free Framework

Getting Typeahead.js to work with Fat Free Framework

typeahead.js

fat-free-framework