使用 Zurb Foundation 进行样式自动完成答案

【问题标题】：Style autocomplete with Zurb Foundation使用 Zurb Foundation 进行样式自动完成
【发布时间】：2013-08-12 14:47:32
【问题描述】：

使用 Foundation 功能而不是 jQuery CSS 进行自动完成的最佳做法是什么？

这是我的代码：http://jsfiddle.net/qhoc/88kfb/

<div class="row">
 <form class="custom">
 <fieldset>
 <legend>Fieldset</legend>
 <div class="row">
  <div class="large-12 columns ui-widget">
   <label for="tags">Input Label</label>
    <input id="tags" type="text" placeholder="large-12.columns">
  </div>
 </div>
</div>

我只是不喜欢在页面上包含另一个 .css 文件：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

所以我想我有两个问题：

有没有办法使用 Foundation 的dropdown 或其他什么？似乎dropdown 仅适用于topbar，并且它的 css 在该特定用例之外搞砸了。
在 Foundation 中创建下拉菜单的“标准”方法是什么？请帮忙举个例子。因为我认为它要么是一堆 rows，要么可能是来自 dropdown 的调整

【问题讨论】：

标签： javascript css jquery-ui jquery-autocomplete zurb-foundation

【解决方案1】：

Foundation 现在正尝试在其下一个版本中默认加入自动完成功能。您可以在此找到条目

https://github.com/zurb/foundation/issues/3100

【讨论】：

【解决方案2】：

您可以尝试通过 jquery 将“f-dropdown”类添加到：

 $('.ui-autocomplete').addClass('f-dropdown');

也设置在app.css o youystyle.css：

.ui-helper-hidden-accessible{display:none}

希望对您有所帮助...http://jsfiddle.net/vgarcias/WdncE/

【讨论】：