Jquery Autocomplete make list slid down and change hovering behavior

Question

I have make autocomplete combobox using jquery , I want the list to slid down and fade like the dropdown list here http://semantic-ui.com/modules/dropdown.html

I have tried to change opacity of the menue list from 0 to 1 , but still not working. this is what I have tried : http://jsfiddle.net/DohaHamdan/v05210xL/17/

<div style="padding:10px">
<select data-Jquery-autocomplete='true'>
    <option value="PHP">PHP</option>
    <option value="Python">Python</option>
    <option value="Ruby">Ruby</option>
    <option value="Scala">Scala</option>
    <option value="Scheme">Scheme</option>
</select>
</div>

second issue that when I hovering to the selected item it become gray

thank you:)

Answer 1

1. You can use the transition on the max-height (css) with the open event of the jquery-autocomplete in order to change the max-height of the container to 0 and then remove the auto-height. When you do so (combined with the transition) you will get the element animation. Just notice it will work only on browsers the support css3 (transition).
2. The gray color you see is from the .ui-state-focus. You can change it to the color that you want in your css file.