Question

我几天前开始使用twitters 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

好的，在我使用Console查看错误后我发现了它。我没有定义把手。它现在正在运作！

我自己解决了这个问题。这是我制作/使用的自定义java脚本文件。

$(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问题

1 个答案: