Style autocomplete with Zurb Foundation

问题

What is the best practice to use Foundation features instead of jQuery CSS for Autocomplete?

Here is my code: 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>

I just don't like to include another .css file which is overhead on the page:

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

So I guess I have two questions:

Is there a way to use dropdown from Foundation or something? It seems like dropdown is only for topbar and its css screwed up outside that particular use case.
What is some "standard" way to create the dropdown menu in Foundation? Please help with some example. Because I was thinking it's either bunch of rows or it could be a tweak from dropdown

回答1:

You could try to add the 'f-dropdown' class via jquery to the :

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

also set on the app.css o youystyle.css:

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

I hope it helps... http://jsfiddle.net/vgarcias/WdncE/

回答2:

Foundation is now trying to incorporate an auto complete by default, in its next version. You can find the entry in this

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

来源：https://stackoverflow.com/questions/18167538/style-autocomplete-with-zurb-foundation

标签

javascript

css

jquery-ui

jquery-autocomplete

zurb-foundation