Elemen UI ini terinspirasi dari Google, lebih tepatnya pada bab atas dasbor Forum Blogger (2013). Ini hanyalah penerapan konsep drop-down sajian sebagai embel-embel elemen input teks dan sama sekali tidak ada hubungannya dengan cara kerja filter penelusuran/sortir topik pembicaraan menyerupai pada grup Google.
Elemen ini dapat Anda gunakan untuk memperlihatkan sugesti atau pilihan kata kunci secara tidak pribadi tanpa harus repot-repot menuliskan perintah-perintah khusus di sekitar formulir untuk pengguna biar mereka menuliskan kata kunci menyerupai ini dan itu. Cukup letakkan beberapa sugesti kata kunci pada sajian drop-down, maka para pengguna akan segera mengerti citra formulir tersebut ketika mereka menampilkan menu:
HTML
<div class="input-text-wrap"> <form action="//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 sajian */ .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 sajian 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 sajian 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 sajian $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 sajian $(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);