I had almost the same problem a while ago.
Here is an example of what I did with mine to fulfill requirement 1) and 3). http://plnkr.co/edit/4nC44UETWhPb8yVNNtKz?p=preview
The code is also pasted below, but without a massive block of comments. Basically, how it works, it uses a semantic user interface, which includes a drop-down list of choices, i.e. "Search Select", and uses blur to set the hidden text field that you send.
The reason you need to set the hidden text box using code is the semantic user interface, which creates a second text box with the “search” class, which users will see and enter data, but are not actually represented.
There is also other additional code to solve other problems, see the comments in the plunker link above. To deal with one of them, I had to remove the automatically generated “active” class from the drop-down div options, which led to an effect without bias for the selected item in the drop-down list.
HTML
<div class="customDropdownSearchTextInput ui search selection dropdown"> <input type="hidden" name="gender"> <div class="default text">Gender</div> <i class="dropdown icon"></i> <div class="menu"> <div class="item" data-value="Male">Male</div> <div class="item" data-value="Female">Female</div> </div> </div>
Javascript
$('.ui.dropdown').dropdown(); $(".customDropdownSearchTextInput").each(function(){ var defaultText = false; if ( $(this).find(".text").hasClass("default") && $(this).find(".text").text() ) defaultText = $(this).find(".text").text(); var isSelectTag = false; if ( $(this).find("input:hidden").length < 1 || $(this).addBack().find( "select" ).length > 0 ) isSelectTag = true; if ( isSelectTag == false ) { $(this).dropdown( { forceSelection: false }); $(this).find(".search").on("focus", function(event){ var aOpt = $(this).parent().find(".active"); aOpt.removeClass("active"); }); var originalText = $(this).find(".search").text(); $(this).find(".search").on("blur", function(event){ var text = $(this).val(); if ( originalText != text ) { if ( $.trim(text)=="" && defaultText != false ) { $(this).parent().find(".text").addClass("default").removeClass("filtered").text(defaultText); } $(this).parent().find("input:hidden").val(text); originalText = text; } }); } });