Input Box Option Drop Down

Question

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.

Cheers!

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.

Answer 1

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.

Answer 2

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?

Answer 3

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.

Answer 4

我认为这并不是在下拉列表位于输入框内，而是隐藏了输入框chrome，并将其与下拉列表一起置于输入外观div中。