Twitter / Typeahead建议显示为内联

Question

是否有任何选项或CSS技巧来显示内联的预先建议（如在SO标签建议中）？

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

这是目前的结果，

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

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

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

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