Question

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

这是我的typeahead样本。

 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旁边看到我正在显示详细的文档详细信息列表。所以我再一次想要在mouseover doc id事件上显示doc详细信息。

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

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

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

我该如何开展这项工作

所以我检查了一个类似的问题，但是对于bootstrap typeahead。 open popover from typeahead list

但是，在此方案中，单击列表项后会显示弹出窗口。我知道这对于typeahead.js是多么可能 - ＆gt;可以在itemselectedhandler中实现。但是，它似乎打败了目的，因为项目已经被选中，用户不知道与所选id相对应的其他细节。

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

Answer 1

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

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

                 //Code to run Popup
             };

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

typeahead.js - 弹出自定义下拉列表建议

1 个答案: