Framework7 - Bilah Pencarian
Deskripsi
Framework 7 memungkinkan pencarian elemen dengan menggunakan kelas searchbar .
Parameter Bilah Pencarian
| S.No | Parameter & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | searchList Ini mencari pemilih CSS atau elemen HTML dari daftar. |
string atau Elemen HTML | - |
| 2 | searchIn Anda dapat mencari elemen tampilan daftar pemilih CSS, juga mencari elemen dengan meneruskan kelas .item-title , .item-text . |
tali | '.nama barang' |
| 3 | found Ini mencari pemilih CSS atau elemen HTML menggunakan elemen "ditemukan". Lebih lanjut, ia menggunakan elemen .searchbar-found jika tidak ada elemen yang ditentukan. |
string atau Elemen HTML | - |
| 4 | notfound Ini mencari pemilih CSS atau elemen HTML menggunakan elemen "tidak ditemukan". Lebih lanjut, ini menggunakan elemen .searchbar-not-found jika tidak ada elemen yang ditentukan. |
string atau Elemen HTML | - |
| 5 | overlay Ini menelusuri pemilih CSS atau elemen HTML menggunakan elemen "hamparan bilah pencarian " dan menggunakan elemen .searchbar-overlay , jika tidak ada elemen yang ditentukan. |
string atau Elemen HTML | - |
| 6 | ignore Anda dapat mengabaikan pemilih CSS untuk item dengan menggunakan bilah pencarian. |
tali | '.searchbar-ignore' |
| 7 | customSearch Jika diaktifkan, bilah pencarian tidak akan mencari melalui blok daftar mana pun yang ditentukan oleh searchList dan Anda akan diizinkan untuk menggunakan fungsionalitas pencarian kustom. |
boolean | Salah |
| 8 | removeDiacritics Saat mencari elemen, hapus diakritik dengan mengaktifkan parameter ini. |
boolean | Salah |
| 9 | hideDividers Parameter ini akan menyembunyikan pemisah item dan judul grup, jika tidak ada item. |
boolean | benar |
| 10 | hideGroups Parameter ini akan menyembunyikan grup, jika tidak ada item yang ditemukan dalam grup tampilan daftar. |
boolean | benar |
Callback Bar Pencarian
| S.No | Callback & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | onSearch Metode ini akan mengaktifkan fungsi panggilan balik saat melakukan pencarian. |
fungsi | - |
| 2 | onEnable Metode ini akan mengaktifkan fungsi panggilan balik saat Bilah Pencarian menjadi aktif. |
fungsi | - |
| 3 | onDisable Metode ini akan mengaktifkan fungsi panggilan balik saat Bilah Pencarian menjadi tidak aktif. |
fungsi | - |
| 4 | onClear Metode ini akan mengaktifkan fungsi panggilan balik saat Anda mengklik elemen "hapus". |
fungsi | - |
Properti Bilah Pencarian
| S.No | Properti & Deskripsi |
|---|---|
| 1 | mySearchbar.params Merupakan parameter yang diinisialisasi yang diteruskan dengan objek. |
| 2 | mySearchbar.query Menelusuri kueri saat ini. |
| 3 | mySearchbar.searchList Mendefinisikan blok daftar pencarian. |
| 4 | mySearchbar.container Mendefinisikan wadah bilah pencarian dengan elemen HTML. |
| 5 | mySearchbar.input Mendefinisikan input bilah pencarian dengan elemen HTML. |
| 6 | mySearchbar.active Ini menentukan apakah bilah pencarian diaktifkan atau dinonaktifkan. |
Metode Bilah Pencarian
| S.No | Metode & Deskripsi |
|---|---|
| 1 | mySearchbar.search(query); Metode ini mencari kueri yang lewat. |
| 2 | mySearchbar.enable(); Ini memungkinkan bilah pencarian. |
| 3 | mySearchbar.disable(); Ini menonaktifkan bilah pencarian. |
| 4 | mySearchbar.clear(); Anda dapat menghapus kueri dan hasil pencarian. |
| 5 | mySearchbar.destroy(); Ini menghancurkan contoh bilah pencarian. |
Peristiwa JavaScript Bilah Pencarian
| S.No | Deskripsi acara | Target |
|---|---|---|
| 1 | search Anda dapat mengaktifkan acara ini saat mencari elemen. |
<div class = "list-block"> |
| 2 | clearSearch Peristiwa ini akan dijalankan ketika pengguna mengklik elemen clearSearch. |
<div class = "list-block"> |
| 3 | enableSearch Saat Bilah Pencarian diaktifkan, acara ini akan diaktifkan. |
<div class = "list-block"> |
| 4 | disableSearch Saat Search Bar dinonaktifkan, dan pengguna mengklik tombol batal, atau elemen "search bar-overlay", peristiwa ini akan diaktifkan. |
<div class = "list-block"> |
Contoh
Contoh berikut menunjukkan penggunaan bilah pencarian pada gulir di Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Search Bar Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages navbar-fixed">
<div data-page = "home" class = "page">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Search Bar Layout</div>
</div>
</div>
<form data-search-list = ".list-block-search" data-search-in = ".item-title"
class = "searchbar searchbar-init">
<div class = "searchbar-input">
<input type = "search" placeholder = "Search"><a href = "#"
class = "searchbar-clear"></a>
</div>
<a href = "#" class = "searchbar-cancel">Cancel</a>
</form>
<div class = "searchbar-overlay"></div>
<div class = "page-content">
<div class = "content-block searchbar-not-found">
<div class = "content-block-inner">No element found...</div>
</div>
<div class = "list-block list-block-search searchbar-found">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">India</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Argentina</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Belgium</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Brazil</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Canada</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Colombia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Denmark</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ecuador</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">France</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Germany</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Greece</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Haiti</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Hong Kong</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Iceland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ireland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Jamaica</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Japan</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kenya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kuwait</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Libya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Liberia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Malaysia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mauritius</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mexico</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Namibia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">New Zealand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Oman</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Paraguay</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Philippines</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Russia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Singapore</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">South Africa</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Thailand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">United Kingdom</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Vatican City</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Zimbabwe</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas search_bar.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/search_bar.html dan hasilnya ditampilkan seperti di bawah ini.
Jika elemen yang terdapat dalam daftar dimasukkan di bilah pencarian, ini akan menampilkan elemen tertentu dari daftar.
Jika elemen selain elemen yang terdapat dalam daftar dimasukkan, ini akan menampilkan tidak ada elemen yang ditemukan.