📌  相关文章
📜  Framework7自动完成

📅  最后修改于: 2021-01-02 06:42:50             🧑  作者: Mango

Framework7自动完成

在Framework7中，自动完成功能是一种移动友好且触摸优化的组件，可以作为下拉列表或独立方式使用。您可以使用JavaScript方法创建和初始化自动完成实例：

myApp.autocomplete(parameters)

在此，参数是用于初始化自动完成实例的必需对象。

Framework7中的自动完成参数

以下是Framework7中的自动完成参数列表：

Index Parameter Type Description
1) openIn string It defines how to open an Autocomplete which could be used as dropdown, popup or page.
2) source function (autocomplete, query, render) It uses autocomplete instance, search query and renders function to pass matched items with array.
3) valueProperty string It specifies the item value of matched item object’s key.
4) limit number It displays the limited number of items in autocomplete per query.
5) preloader boolean Preloader can be used to specify autocomplete layout by setting it to true.
6) preloaderColor string It specifies the preloader color. By default, the color is “black”.
7) value array Defines the array with default selected values.
8) textProperty string It specifies the item value of matched item object’s key, which can be used as a title of displayed options.

独立自动完成参数

Index Parameter Type Description
1) opener string or HTMLElement It is string or html element parameter, which will open the standalone autocomplete page.
2) popupclosetext string It is used to close the autocomplete popup.
3) backtext string It provides the back link when autocomplete is opened as page.
4) pagetitle string It specifies the autocomplete page title.
5) searchbarplaceholdertext string It specifies the search bar placeholder text.
6) searchbarcanceltext string It defines the search bar cancel button text.
7) notfoundtext string It displays the text when there is no matched element found.
8) multiple boolean td> It allows to select multiple selection by setting it to true.
9) navbartheme string It specifies the color theme for navbar.
10) backonselect boolean When the user picks value, the autocomplete will be closed by setting it to true.
11) formtheme string It specifies the color theme for form.

下拉式自动完成参数

下拉列表自动完成参数列表：

Index Parameter Type Description
1) input string or HTML Element It is string or HTML element used for text input.
2) dropdownPlaceholderText string It specifies the dropdown placeholder text.
3) updateInputValueOnSelect boolean It is used to update the input value on select by setting it to true.
4) expandInput boolean You can expand the text input in List View to make full screen wide during dropdown visible by setting item-input it to true.

自动完成回调功能

Index Parameter Type Description
1) onChange function (autocomplete, value) Whenever the autocomplete value is changed, this callback function will be executed.
2) onOpen function (autocomplete) Whenever autocomplete is opened, this callback function will be executed.
3) onClose function (autocomplete) Whenever autocomplete is closed, this callback function will be executed.

自动完成模板

Index Parameter Type Description
1) navbarTemplate string It is standalone autocomplete navbar template.
2) itemTemplate string It is standalone template7 form item.
3) dropdownTemplate string It is template7 dropdown template.
4) dropdownItemTemplate string It is template7 dropdown list item.
5) dropdownPlaceholderTemplate string It is template7 dropdown placeholder item.

自动完成属性

以下是Framework7中的自动完成属性的列表：

Index Properties Description
1) myAutocomplete.params Defines the initialization parameters that are passes with object.
2) myAutocomplete.value It defines the array with selected values.
3) myAutocomplete.opened It opens the Autocomplete if it is set to true.
4) myAutocomplete.dropdown It specifies an instance of Autocomplete dropdown.
5) myAutocomplete.popup It specifies an instance of Autocomplete popup.
6) myAutocomplete.page It specifies an instance of Autocomplete page.
7) myAutocomplete.pageData It defines Autocomplete page data.
8) myAutocomplete.searchbar It defines Autocomplete searchbar instance.

自动完成方法

以下是自动完成方法的列表：

Index Methods Description
1) myAutocomplete.open() It opens the Autocomplete, which could be used as dropdown, popup or page.
2) myAutocomplete.close() It closes the Autocomplete.
3) myAutocomplete.showPreloader() It shows the Autocomplete preloader.
4) myAutocomplete.hidePreloader() It hides the Autocomplete preloader.
5) myAutocomplete.destroy() It ruins the Autocomplete preloader instance and removes all events.

自动完成示例

让我们以一个示例来演示Framework7中所有自动完成参数的用法：




   
      
      
      
      Autocomplete
      
      
   

   
      

         

            

               

               
                  

                     

                        
 

                        
Autcomplete

                        
 

                     

                  

               
                  

                     
Simple Dropdown Autocomplete

                     

                        
    
                           
  • 
                              
    Country
    
                              
    
                                 
                              
    
                           
    • 
                        

                     

                  
                     
Dropdown With Input Expand

                     

                        
    
                           
  • 
                              
    Country
    
                              
    
                                 
                              
    
                           
    • 
                        

                     

                  
                     
Dropdown With All Values

                     

                        
    
                           
  • 
                              
    Country
    
                              
    
                                 
                              
    
                           
    • 
                        

                     

                  
                     
Dropdown With Placeholder

                     

                        
    
                           
  • 
                              
    Country
    
                              
    
                                 
                              
    
                           
    • 
                        

                     

                  
                     
Simple Standalone Autocomplete

                     

                        
                     

                  
                     
Popup Standalone Autocomplete

                     

                        
                     

                  
                     
Multiple Values Standalone Autocomplete