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
1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-25#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
1code-line:2-12code-line:2-23code-line:2-34code-line:2-4<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!">×</span></span>
<button class='search-btn' type="submit" value="Submit">cari</button>
</form>
jQuery
1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-1011code-line:3-1112code-line:3-1213code-line:3-1314code-line:3-1415code-line:3-15<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.
2 komentar
simple ya gan?
BalasHapushttp://www.zynation.com/
edit aja
HapusLink aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>