Input Box Option Drop Down

I'm looking at creating something like this:

http://konigi.com/interface/kontain-search

alt text http://s3.amazonaws.com/konigi/interface/kontain-search-2.png

I don't suppose anyone has any resources which could guide me? I know I'm not giving much information but I wouldn't know where to start looking.

Chee开发者_StackOverflowrs!

EDIT Sorry, I meant just the drop down / input box, nothing else on that site.

EDIT AGAIN The drop down list is inside of the input box, hence why I was wondering.

It may be something similar to these examples but with only one main item. and manipulate with jquery each "li" and that action taken

example 1 | example 2 | example 3 | example 4

edition answer: this is done with css. is all contained in a div -> input + menu. for the input is removed border styles and background color is the same as the container div.

Well, you put part of the search form in a hidden div and pop it up when the user clicks or hovers on some other element, either inside or outside the form. Use CSS as needed to position the div. Not really sure what problems you could possibly have with something like this.

Maybe you can be more specific and break this problem down in several more focused questions?

I did not drill into the site, but from a logical standpoint, perhaps the search box AND the dropdown are "inside" another element (div?) that forms the complex control...and just formated(CSS)/actions(jQuery) placed on those.

<div id="searchDiv">
    <div id="searchText"></div>
    <div id="searchDropdown"></div>
    <div id="searchButton"><div>
</div>

Easy enough to set somthing like that up.

I think what's going on there isn't that the dropdown is inside an input box, but rather that the input box chrome is hidden and it's placed inside an input-looking div along with the dropdown.