Twitter/Typehead建议内联显示

Question

是否有任何选项或CSS技巧来内联显示typehead建议(就像在SO标签建议中一样)？

我尝试了一些css (显示伸缩，改变宽度)，但没有像我预期的那样工作。

这是当前的结果，

Fiddle

​

​

我需要把它做成这样

​

​

谢谢

Answer 1

这可以通过简单的css来完成。建议包含在tt-menu > tt-dataset div中。您可以更改宽度并设置tt-dataset div的display:flex

.tt-menu{
  width: 500 !important;
}

.tt-dataset{
  display:flex;
}

Answer 2

您可以使用模板来呈现typehead的数据内容，这是我使用过的示例代码。

$('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 3
    }, {
        name: 'Cities',
        source: citiesSubstringMatcher(),
        display: 'name',
        limit: 20,
        templates: {
            suggestion: suggestions_city_html
        }
    });

function suggestions_city_html(data) {
    return "<div class='pointer'>" + data.name + "</div>";
}

您可以为此定义自己的模板。