Select Box Default Features Implementation in Custom Select Box

I have created a custom select box using div, span, UL and LI's. I am able to get the selected LI text and ID and can also update the same. My problem is I want to implement all(mostly two) the features of a select box.

Features:

1) When you open a select box and if there is a long list of options you can search them by keyword. (How to achieve ??)

2) Select box should be open according to the available space i.e, if there is more space above the select box then it should be open above or vice-versa. (I think I have to calculate the position of select box on the screen ??).

Any idea how to achieve this ?? Thanks in advance !!

Here is the JSFiddle Link of the my custom select box created so far.