typeahead.js - 通过弹出自定义下拉建议答案

【问题标题】：typeahead.js - customize dropdown suggestions with pop uptypeahead.js - 通过弹出自定义下拉建议
【发布时间】：2014-08-19 13:04:02
【问题描述】：

我想弄清楚如何为typeahead.js 定制建议。基本上，我想搜索包含在 JSON 文件中的医生 ID，并提供相关医生 ID 的提前输入 dropdown，并在 mouseover 事件上显示有关医生的更多详细信息。

这是我的预输入示例。

 DoctorIdTypeahead.typeahead({
                 highlight: true
             }, {
                 name: 'Doctor_ID',
                 displayKey: 'Doctor_ID',
                 source: ids.ttAdapter(),
                 templates: {
                     empty: [
                            '<div class="empty-message">',
                            'No match',
                            '</div>'
                            ].join('\n'),
                     suggestion: function (data) {
                         return '<p class="tooltip">' + data.Doctor_ID + '</p>' +
                         '<div class="panel panel-default">' +
                            '<div class="panel-footer">' +
                                '<p>Name:' + data.Doctor_Name + '</p>' +
                                '<p>Practice Number:' + data.Practice_Number + '</p>' +
                                '<p>Qualifications:' + data.Qualifications + '</p>' +
                                '<p>Specilisation:' + data.Specialisation + '</p>' +
                            '</div>' +
                          '</div>';

                     }
                 }
             });

因此，您可以在每个 ID 旁边看到当前显示的文档详细信息的完整列表。因此，我又一次想找到在文档 ID 的 mouseover 事件上显示文档详细信息。

我尝试使用 jbox 显示工具提示并将我的所有内容放在那里：

        $(function () {
        $('.tooltip').on('mouseover', function () {
            $('.tooltip').jBox('Tooltip', { content: 'great stuff' });
        });
    });

但是我没有得到任何结果。

我怎样才能做到这一点

所以我检查了一个类似的问题，但需要提前输入引导程序。 open popover from typeahead list

但是，在这种情况下，在单击列表项后会出现弹出窗口。我看到这对于 typeahead.js 是如何可能的 - > 可以在 itemselectedhandler 中实现。但是，这似乎违背了目的，因为该项目已被选中，并且用户不知道与所选 ID 对应的其他详细信息。

我还检查了支持的 typeahead.js 事件处理程序：typeahead:cursorchanged 我要试试这个活动，看看它是否有效。

【问题讨论】：

标签： jquery twitter-bootstrap typeahead.js

【解决方案1】：

所以根据我的发现，typeahead:cursorchanged 事件实际上可以在这种情况下工作。但是，它是通过按键而不是鼠标悬停触发的，因此这是部分成功的。

                 var employeeIdItemCursorChanged = function (eventObject, suggestionObject, suggestionDataset) {

                 //Code to run Popup
             };

employeeIdTypeahead.on('typeahead:cursorchanged', employeeIdItemCursorChanged);

【讨论】：