Framework7 - Arama Çubuğu

Açıklama

Çerçeve 7, arama çubuğu sınıfını kullanarak öğeleri aramaya izin verir .

Arama Çubuğu Parametreleri

S.No Parametreler ve Açıklama Tür Varsayılan
1

searchList

Listenin CSS seçicisini veya HTML öğesini arar.

dize veya HTML Öğesi -
2

searchIn

CSS seçicilerinin liste görünümü öğelerini arayabilir, ayrıca öğeleri .item-title , .item-text sınıflarını geçerek de arayabilirsiniz .

dizi '.Ürün başlığı'
3

found

CSS seçiciyi veya HTML öğesini "bulunan" öğesini kullanarak arar. Ayrıca, herhangi bir öğe belirtilmemişse .searchbar-found öğesini kullanır .

dize veya HTML Öğesi -
4

notfound

CSS seçiciyi veya HTML öğesini "bulunamadı" öğesini kullanarak arar. Ayrıca, herhangi bir öğe belirtilmemişse .searchbar-not-found öğesini kullanır .

dize veya HTML Öğesi -
5

overlay

" Searchbar overlay" öğesini kullanarak CSS seçiciyi veya HTML öğesini arar ve herhangi bir öğe belirtilmemişse .searchbar-overlay öğesini kullanır .

dize veya HTML Öğesi -
6

ignore

Arama çubuğunu kullanarak öğeler için CSS seçiciyi göz ardı edebilirsiniz.

dizi ".searchbar-yoksay"
7

customSearch

Etkinleştirildiğinde, arama çubuğu searchList tarafından belirtilen liste bloklarının hiçbirinde arama yapmaz ve özel arama işlevini kullanmanıza izin verilir.

Boole yanlış
8

removeDiacritics

Bir öğe ararken, bu parametreyi etkinleştirerek aksan işaretlerini kaldırın.

Boole yanlış
9

hideDividers

Bu parametre, öğe yoksa öğe ayırıcıları ve grup başlığını gizleyecektir.

Boole doğru
10

hideGroups

Liste görünümü gruplarında hiçbir öğe bulunmazsa, bu parametre grupları gizleyecektir.

Boole doğru

Arama Çubuğu Geri Aramaları

S.No Geri aramalar ve Açıklama Tür Varsayılan
1

onSearch

Bu yöntem, arama yaparken geri arama işlevini ateşleyecektir.

fonksiyon (lar) -
2

onEnable

Bu yöntem, Arama Çubuğu etkin olduğunda geri arama işlevini ateşleyecektir.

fonksiyon (lar) -
3

onDisable

Bu yöntem, Arama Çubuğu devre dışı kaldığında geri arama işlevini ateşleyecektir.

fonksiyon (lar) -
4

onClear

Bu yöntem, "temizle" öğesini tıkladığınızda geri arama işlevini etkinleştirir.

fonksiyon (lar) -

Arama Çubuğu Özellikleri

S.No Özellikler ve Açıklama
1

mySearchbar.params

Nesne ile iletilen başlatılmış parametreleri temsil eder.

2

mySearchbar.query

Mevcut sorguyu arar.

3

mySearchbar.searchList

Arama listesi bloğunu tanımlar.

4

mySearchbar.container

Arama çubuğu kapsayıcısını HTML öğesi ile tanımlar.

5

mySearchbar.input

Arama çubuğu girişini HTML öğesi ile tanımlar.

6

mySearchbar.active

Arama çubuğunun etkin mi yoksa devre dışı mı olduğunu tanımlar.

Arama Çubuğu Yöntemleri

S.No Yöntemler ve Açıklama
1

mySearchbar.search(query);

Bu yöntem, aktarılan sorguyu arar.

2

mySearchbar.enable();

Arama çubuğunu etkinleştirir.

3

mySearchbar.disable();

Arama çubuğunu devre dışı bırakır.

4

mySearchbar.clear();

Sorguyu ve arama sonuçlarını temizleyebilirsiniz.

5

mySearchbar.destroy();

Arama çubuğu örneğini yok eder.

Arama Çubuğu JavaScript Etkinlikleri

S.No Etkinlik Açıklaması Hedef
1

search

Bu olayı elementleri ararken ateşleyebilirsiniz.

<div class = "list-block">
2

clearSearch

Bu olay, kullanıcı clearSearch öğesine tıkladığında tetiklenecektir.

<div class = "list-block">
3

enableSearch

Arama Çubuğu etkinleştirildiğinde, bu olay ateşlenecektir.

<div class = "list-block">
4

disableSearch

Arama Çubuğu devre dışı bırakıldığında ve kullanıcı iptal düğmesine veya "arama çubuğu-yer paylaşımı" öğesine tıkladığında, bu olay tetiklenecektir.

<div class = "list-block">

Misal

Aşağıdaki örnek, Framework7'de kaydırmada arama çubuğunun kullanımını göstermektedir -

<!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>

Çıktı

Yukarıda verilen kodun nasıl çalıştığını görmek için aşağıdaki adımları gerçekleştirelim -

  • Yukarıda verilen HTML kodunu kaydedin search_bar.html sunucunuzun kök klasöründeki dosya.

  • Bu HTML dosyasını http: //localhost/search_bar.html olarak açın ve çıktı aşağıda gösterildiği gibi görüntülenir.

  • Listede bulunan öğe arama çubuğuna girilirse, listeden o belirli öğeyi görüntüler.

  • Listede bulunan öğeler dışında bir öğe girilirse, hiçbir öğe bulunamadı göstermez.