Twitter/Typehead 建议显示内联答案

【问题标题】：Twitter/Typehead suggestion display inlineTwitter/Typehead 建议显示内联
【发布时间】：2018-03-02 06:32:33
【问题描述】：

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

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

这是当前结果，

Fiddle

我需要变成这样

谢谢

【问题讨论】：

您能否提供更多有关您要查找的内容的信息，这非常模糊。
你能创建jsfiddle版本吗？

标签： javascript css typehead

【解决方案1】：

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

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

.tt-dataset{
  display:flex;
}

【讨论】：

【解决方案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>";
}

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

【讨论】：

我认为您没有正确理解这个问题。我在图像中完全使用了模板。我只需要像在第二张图片中一样将它们内联放置。