【问题标题】:Twitter Typeahead Not Displaying SuggestionsTwitter Typeahead 不显示建议
【发布时间】:2017-07-12 19:17:04
【问题描述】:

您好,我正在尝试对数据库进行搜索,并在用户使用 typeahead 输入时提供自动建议。数据作为用户类型返回,但自动建议未显示在输入字段下。

$(window).load(function(){
// Instantiate the Bloodhound suggestion engine
var employees = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'https://www.example.com/prs/emp.php?query=%QUERY',
        wildcard: '%QUERY',
        filter: function (employees) {
            return $.map(employees.results, function (employee) {
                return {
                    label: employee.label,
                    value: employee.value
                };
            });
        }
    }
});

// Initialize the Bloodhound suggestion engine
employees.initialize();
// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
    displayKey: 'value',
    source: employees.ttAdapter(),
    templates: {
       suggestion: function(data){
      return '<p>Name: <strong>' + employee.label + '</strong> | ID: ' + employee.value + '</p>';}

}
});
&lt;input type="text" autocomplete="off" spellcheck="false" class="typeahead employeeName form-control" name="employeeName" style="margin:0px auto;overflow:visible;"  id="employeeName" placeholder="Employee Name"&gt;

我从 php 文件中得到以下响应 [{"label":"Austin, Pickering","value":"155"}]

我不知道为什么它不会显示数据。我花了几个小时试图弄清楚。对此的任何帮助将不胜感激。

【问题讨论】:

    标签: javascript typeahead.js typeahead bloodhound


    【解决方案1】:

    当我在 Snippet 中运行您的代码时,它报告了一些您应该考虑的事情: 错误: { "message": "Uncaught SyntaxError: Unexpected end of input", "文件名": "https://stacksnippets.net/js", “亚麻”:45, “科尔诺”:3 }

    我尝试在 Eclipse 上运行您的代码:

    线程“main”java.lang.Error 中的异常:未解决的编译问题: 窗口无法解析为变量 语法错误,插入“)”完成表达式 语法错误,插入“;”完成 BlockStatements 语法错误,插入“}”完成MethodBody

    at --------(Test.java:6)
    

    【讨论】:

    • 您好,感谢您的关注。当然,代码 sn-p 不会在这里运行,因为远程查询到我已将 url 更改为示例 url 的数据库。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-03-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多