Style autocomplete with Zurb Foundation

Question

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:

1. 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.

2. 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

Solution 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/

Solution 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