Input Teks dengan Pelengkap Sugesti

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 
  4. Demo 
Text Input with Suggestion

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="//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 

4 Komentar

  • Unknown

    satu lagi pilihan penerapan tombol search diblog... :-bd

  • budkalon

    Dan terima kasih banyak :D Dengan ini, para pengunjung akhirnya memiliki panduan query untuk menelusuri blog kita :D

  • Anonim

    Keren mas ada pelengkap sugestinya , tapi sy malah lebih suka kalau drop menu vertikal kebawahnya diganti dengan opsi label yang ada di blog kita masing2 , jadi Search resultnya bisa di filter apalagi kalo blog kita postingannya bejibun :Ozz

    Nah kalo bisa postingin dong mas , saya penasaran banget loh pengen punya search box dengan pencarian berdasar pada patokan label tertentu kayak gitu :'(

    thanks Master Taufik Nurrohman , moga sukses selalu \o/

  • Andi AF Studio

    terrrrrrrrrrlaaalluuuuuuuuuuuu.... mantap jaya! :-bd

Komentar telah ditutup.