使用Zurb Foundation样式自动完成

Question

如何最佳实践地使用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" />

我猜我有两个问题：

1. 有没有办法使用Foundation或其他东西的下拉菜单？似乎下拉菜单只适用于顶部栏，而且它的css在特定用例之外会出现问题。

2. 在Foundation中创建下拉菜单的一些“标准”方法是什么？请提供一些示例。因为我认为它可能是一堆行，或者可以从下拉菜单中进行调整。

- HP.

Answer 1

你可以尝试通过jquery向中添加'f-dropdown'类：

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

还要在app.css和youystyle.css中设置:

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

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

- vgarcias

Answer 2

Foundation现在正在计划在下一个版本中默认加入自动完成功能。您可以在此处找到相关条目：

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

- Vinay Raghu