Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Input Teks dengan Pelengkap Sugesti

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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 4 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!