Pencarian dengan tombol bersihkan


Salah satu yang membuat blog kita menjadi user friendly adalah dengan adanya kotak pencarian, Kotak pencarian ini sangat penting untuk memudahkan pengunjung menjelajahi blog Anda atau mencari artikel lainnya di blog Anda.

Fungsi kotak pencarian untuk saya sendiri adalah untuk mempermudah mencari posting yang akan saya tambahkan sebagai link internal ketika akan menerbitkan sebuah posting baru.

Pada kali ini saya akan share sebuah kotak pencarian dengan tambahan fitur tombol pembersih text input, kotak pencarian ini sederhana hanya ada sedikit tambahan jQuery.

CSS

#search-form {width:200px;padding:4px;background:#242424;}
.text-input-wrapper {
  border:1px solid #282828;
  padding:0px;
  display:inline-block;   
  width:150px; 
}
.text-input-wrapper input {
  border:none;
  background:#fff;
  outline:none;
  padding:0;
  margin:0;
  font:inherit;   
  width:150px; 
}
.text-input-wrapper span {
  cursor:pointer;
  color:#369;
  font-weight:bold;
  visibility:hidden;
}
.bersih{ background:#fff;margin-left:-15px}
.search-btn{cursor:pointer;width:40px;height:22px;background:#444;color:#fff;border:1px solid #262626;}
.search-btn:hover{background:#666;}

HTML From

<form id="search-form" action="/search" method="get">
    <span class="text-input-wrapper"><input type="text" name="q" autocomplete="off" size="18"/><span class="bersih" title="bersihkan!">&times;</span></span>
    <button class='search-btn' type="submit" value="Submit">cari</button>
</form>

jQuery

<script type="text/javascript">
//<![CDATA[
(function() {
 var searchForm = document.getElementById('search-form'),
  textInput = searchForm.q,
  clearBtn = textInput.nextSibling;
 textInput.onkeyup = function() {
  clearBtn.style.visibility = (this.value.length) ? "visible" : "hidden";
 };
 clearBtn.onclick = function() {
  this.style.visibility = "hidden";
  textInput.value = "";
 };
})();
//]]></script>


Penambahan fungsi pembatasan hasil pencarian:


jika anda ingin membatasi hasil pencarian sesuai dengan nilai atau jumlah yang ingin anda sesuaikan tambahkan kode berikut

<input name='max-results' type='hidden' value='8'/>

Perhatikan pada nilai value='8' ini bisa anda rubah sesuai kebutuhan.