Elemen UI ini terinspirasi dari Google, lebih tepatnya pada bagian atas dasbor Forum Blogger (2013). Ini hanyalah penerapan konsep drop-down menu sebagai pelengkap elemen input teks dan sama sekali tidak ada hubungannya dengan cara kerja filter penelusuran/sortir topik pembicaraan seperti pada grup Google.
Elemen ini bisa Anda gunakan untuk memberikan sugesti atau pilihan kata kunci secara tidak langsung tanpa harus repot-repot menuliskan perintah-perintah khusus di sekitar formulir untuk pengguna agar mereka menuliskan kata kunci seperti ini dan itu. Cukup letakkan beberapa sugesti kata kunci pada menu drop-down, maka para pengguna akan segera mengerti gambaran formulir tersebut saat mereka menampilkan menu:
HTML
<div class="input-text-wrap">
<form action="http://your_site_name.com/search" method="get">
<input class="text-input" type="text" name="q" autocomplete="off">
<span class="down-arrow"></span>
<input class="submit-button" type="submit" value="Search">
<ul>
<li>Wallpaper 3D</li>
<li>Anime</li>
<li>Manga</li>
<li>Comics List</li>
<li>Characters</li>
<li>Animepedia</li>
</ul>
</form>
</div>
CSS
/*
@credit: http://www.dte.web.id, https://plus.google.com/108949996304093815163/about
font-family: Segoe,"Segoe UI",Arial,Sans-Serif
font-size: 12px
line-height: 30px
border-color: #8E8E74, black
color: #333, #666, black
background-color: white, #FFEAD3, #EDD8BF, #E0CBB2
*/
/* outer */
.input-text-wrap {
text-align:left;
display:inline-block;
background-color:white;
border:1px solid #8E8E74;
height:30px;
position:relative;
font:normal normal 12px/30px Segoe,"Segoe UI",Arial,Sans-Serif;
color:#333;
-webkit-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
-moz-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
}
/* focused `.input-text-wrap` */
.input-text-wrap.focused {
-webkit-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
-moz-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
border-color:black;
}
/* resets or netralize all element inside */
.input-text-wrap input,
.input-text-wrap form,
.input-text-wrap ul,
.input-text-wrap li {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
font:inherit;
color:inherit;
vertical-align:top;
}
.input-text-wrap input {display:inline-block}
.input-text-wrap .text-input,
.input-text-wrap .submit-button {
height:30px;
line-height:30px;
font-weight:bold;
margin:0 20px 0 5px;
outline:none;
}
/* the text input */
.input-text-wrap .text-input {
width:160px; /* set the text input width here */
}
/* the submit button */
.input-text-wrap .submit-button {
width:70px;
padding:0 0 2px;
margin:0 0;
background-color:#FFEAD3;
border-left:1px solid #8E8E74;
color:#666;
cursor:pointer;
-webkit-box-shadow:0 0 2px rgba(0,0,0,.4);
-moz-box-shadow:0 0 2px rgba(0,0,0,.4);
box-shadow:0 0 2px rgba(0,0,0,.4);
position:relative;
}
.input-text-wrap .submit-button:hover {
background-color:#EDD8BF;
color:black;
}
/* the drop-down menu */
.input-text-wrap ul {
position:absolute;
top:100%;
right:-1px;
left:-1px;
z-index:99;
background-color:white;
border:1px solid black;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4);
display:none;
}
/* drop-down menu item */
.input-text-wrap li {
line-height:26px;
padding:0 10px;
cursor:pointer;
}
.input-text-wrap li:hover {
background-color:#E0CBB2;
color:black;
}
/* the down arrow before the submit button */
.input-text-wrap .down-arrow {
display:block;
width:20px;
height:30px;
position:absolute;
top:0;
right:70px;
cursor:pointer;
}
.input-text-wrap .down-arrow:hover,
.input-text-wrap .down-arrow.active {
background-color:white;
-webkit-box-shadow:-1px 1px 2px rgba(0,0,0,.4);
-moz-box-shadow:-1px 1px 2px rgba(0,0,0,.4);
box-shadow:-1px 1px 2px rgba(0,0,0,.4);
z-index:2;
}
.input-text-wrap .down-arrow:active,
.input-text-wrap .down-arrow.active {
-webkit-box-shadow:-1px 1px 1px rgba(0,0,0,.2);
-moz-box-shadow:-1px 1px 1px rgba(0,0,0,.2);
box-shadow:-1px 1px 1px rgba(0,0,0,.2);
}
/* create the down-arrow triangle with pseudo-element and border hack */
.input-text-wrap .down-arrow:before {
content:"";
display:block;
width:0;
height:0;
border:4px solid transparent;
border-top-color:#666;
position:absolute;
top:14px;
left:50%;
margin-left:-4px;
}
JQuery
(function($) {
var $inputWrap = $('.input-text-wrap'),
$arrow = $inputWrap.find('.down-arrow');
// Hide the dropdown menu when user click outside the `.input-text-wrap`, anywhere...
$(document).on("click", function() {
$inputWrap.find('ul').hide();
$arrow.removeClass('active');
});
$arrow.on("click", function(e) {
// Remove all the `focused` class and hide all visible drop-down menu
$inputWrap.removeClass('focused').find('ul:visible').hide();
// Remove al the `active` down arrow
$arrow.removeClass('active');
// Toggle the `.down-arrow` active class
$(this).toggleClass('active')
// Add a `focused` class to the `.input-text-wrap`
.closest('.input-text-wrap').addClass('focused')
// Show or hide the dropdown `ul`
.find('ul').toggle()
// When we click the `li`...
.find('li').on("click", function() {
// Set the input text value to the clicked `li`'s text
$(this).closest('.input-text-wrap').find('.text-input').val($(this).text())
// and trigger the focus event to it
.trigger("focus");
// After that, hide the visible dropdown menu
$(this).parent().hide();
});
// Prevent event bubbling!
e.stopPropagation();
});
// When the text input focused...
$inputWrap.find('.text-input').on("focus", function() {
// Add a `focused` class to the `.input-text-wrap`
$(this).closest('.input-text-wrap').addClass('focused');
// When the text input loses the focus...
}).on("blur", function(e) {
// Remove the `focused` class from `.input-text-wrap`
$(this).closest('.input-text-wrap').removeClass('focused');
});
})(jQuery);
Demo
