提前输入问题

Question

几天前我开始使用 Twitter typeahead，当我希望他只显示一个值、IE 用户名或类似内容时，它运行良好。当我决定我想要更多东西时，比如在 Facebook 上的搜索结果图片下拉列表中以及图片旁边的人名和其他一些信息，我遇到了重大问题。尝试了几个教程并设法完成了其中一项工作，但仅限于静态 JSON 文件。我想知道我可以用 SQL queuery 替换那个 JSON 文件吗？

以下代码仅用于文本：

$(document).ready(function() {
    var users = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('username'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: 'users.php?query=%QUERY'        
    });

    users.initialize();

    $('#users').typeahead({
        hint: true,
        highlight: true     
    }, {
        name: 'users',
        displayKey: 'username',
        source: users.ttAdapter()
    }); 
});

此代码用于 JSON 文件自定义显示：

$(document).ready(function () {

$('.WordpressPosts').typeahead({
    name: 'Wordpress',
    prefetch: 'test2.json',
    template: [
        '<p class="repo-tag">{{tag}}</p>',
        '<p class="repo-name">{{name}}</p>',
        '<p class="repo-description">{{description}}</p>'
    ].join(''),
    engine: Hogan
    });
});

有什么办法可以解决我的问题吗？提前谢谢你。

Answer 1

好的，在我使用控制台查看问题后，我明白了。我没有定义车把。现在可以使用了！

我自己解决了这个问题。这是自定义 java 脚本文件 I made/used.

$(document).ready(function() {
    var users = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('username'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: 'users.php?query=%QUERY'        
    });

    users.initialize();

    $('#users').typeahead({
        hint: true,
        highlight: true     
    }, {
        name: 'users',
        displayKey: 'username',
        source: users.ttAdapter(),
        templates: {
        empty: [
        '<div style="height:50px; width:330px;">',
        'Nope',
        '</div>'
        ].join('\n'),
        suggestion: Handlebars.compile('your html code, call items with {{username}}')
        } 
    }); 
});

您需要包含的文件：

<script src="js/hogan.js"></script>
<script src="js/handlebars-v2.0.0.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.typeahead.js"></script>

<script src="js/typeahead.js"></script>
<script src="js/global.js"></script>

提前输入问题

Typeahead issues

php

json

twitter-bootstrap