Twitter/Typehead 内联显示建议

Question

是否有任何选项或 CSS 技巧可以内联显示打字头建议（如在 SO 标签建议中）？

我尝试了一些 css（显示 flex，改变宽度），但没有像我预期的那样工作。

这是当前结果，

Fiddle

我需要做成这样

谢谢

Answer 1

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

$('.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>";
}

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

Answer 2

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

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

.tt-dataset{
  display:flex;
}

Twitter/Typehead 内联显示建议

Twitter/Typehead suggestion display inline

javascript

css

typehead