如何将Kartik Typeahead放置在文本输入框上方

Question

如何将自动完成结果放置在文本输入框上方？对我来说最好的方法是在此小部件中添加选项或使用某些CSS规则。

- Ixon

Answer 1

此时此刻，我终于在typeahead小部件的render事件中使用了jQuery解决方案，通过在每次渲染后修改css的margin-top。以下是代码：

echo Typeahead::widget([
//(...)
     'pluginEvents' => [
        'typeahead:render' => 'function(event,ui) {

            var ttMenu = $("#search-main .tt-menu").first();
            var ttMenuHeight;

            if($(ttMenu).hasClass("tt-open")) {
                ttMenuHeight = -$(ttMenu).height();
                $(ttMenu).css("margin-top", ttMenuHeight - 70);
            }
        }',
    ],
//(...)
]);

'#search-main .tt-menu' 是我的 typeahead 输入选择器，而这个 "70" 是输入框的高度，请确保将其替换为您自己的高度。

希望能对您有所帮助。

- Ixon