在typeahead.js或autocomplete.js的一行上顯示多個結果

Question

我正在尋找一個類似於“購買一個餡餅應用程序”自動完成的自動完成文本小部件。 （有關自動完成的圖片，請參見http://buymeapie.com/ ）

我想做的是使用JQuery autocomplete或typeahead.js在下拉列表的一行中顯示多個結果。

任何建議如何實施將不勝感激:-)

Answer 1

如果您使用的是typeahead.js，則可以按照文檔說明修改其外觀： https : //github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#look-and-feel

下拉菜單的HTML結構如下所示：

<span class="tt-dropdown-menu">
  {{#datasets}}
    <div class="tt-dataset-{{name}}">
      {{{header}}}
      <span class="tt-suggestions">
        {{#suggestions}}
          <div class="tt-suggestion">{{{suggestion}}}</div>
       {{/suggestions}}
       {{^suggestions}}
         {{{empty}}}
       {{/suggestions}}
      </span>
      {{{footer}}}
    </div>
  {{/datasets}}
</span>

首先，您必須使用.tt-dropdown-menu類為div設置寬度：

.tt-dropdown-menu {
  width: 422px; 
}

然后，您必須將.tt-suggestion div的顯示設置為inline或inline-block ：

.tt-suggestion {
  display: inline-block;
}

這是一個小提琴： http : //jsfiddle.net/dtengeri/7wftL/