📌  相关文章
📜  Framework7-自动完成

📅  最后修改于: 2020-10-25 02:55:40             🧑  作者: Mango

描述

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

myApp.autocomplete(parameters)

需要参数的对象用于初始化自动完成实例。

自动完成参数

下表列出了Framework7中可用的自动完成参数-

S.No Parameters & Description Type Default
1

openIn

It defines how to open an Autocomplete which could be used as dropdown, popup or page.

 string page
2

source

It uses autocomplete instance, search query and renders function to pass matched items with array.

 function (autocomplete, query, render) –
3

valueProperty

It specifies the item value of matched item object’s key.

 string id
4

limit

It displays the limited number of items in autocomplete per query.

 number –
5

preloader

Preloader can be used to specify autocomplete layout by setting it to true.

 boolean false
6

preloaderColor

It specifies the preloader color. By default, the color is “black”.

 string –
7

value

Defines the array with default selected values.

 array –
8

textProperty

It specifies the item value of matched item object’s key, which can be used as a title of displayed options.

 string text

独立自动完成参数

下表列出了Framework7中可用的独立自动完成参数-

S.No Parameters & Description Type Default
1

opener

It is string or HTML element parameter, which will open the standalone autocomplete page.

 string or HTMLElement –
2

popupCloseText

It is used to close the autocomplete popup.

 string ‘Close’
3

backText

It provides the back link when autocomplete is opened as page.

 string ‘Back’
4

pageTitle

It specifies the autocomplete page title.

 string –
5

searchbarPlaceholderText

It specifies the search bar placeholder text.

 string ‘Search’
6

searchbarCancelText

It defines the search bar cancel button text.

 string ‘cancel’
7

notFoundText

It displays the text when there is no matched element found.

 string ‘Nothing found’
8

multiple

It allows to select multiple selection by setting it to true.

 boolean false
9

navbarTheme

It specifies the color theme for navbar.

 string –
10

backOnSelect

When the user picks value, the autocomplete will be closed by setting it to true.

 boolean false
11

formTheme

It specifies the color theme for form.

 string –

下拉式自动完成参数

下表列出了Framework7中可用的Dropdown Autocomplete参数-

S.No Parameters & Description Type Default
1

input

It is string or HTML element used for text input.

 string or HTMLElement –
2

dropdownPlaceholderText

It specifies the dropdown placeholder text.

 string –
3

updateInputValueOnSelect

You can update the input value on select by setting it to true.

 boolean true
4

expandInput

You can expand the text input in List View to make full screen wide during dropdown visible by setting item-input it to true.

 boolean false

自动完成回调功能

下表列出了Framework7中可用的Dropdown Autocomplete参数-

S.No Parameters & Description Type Default
1

onChange

Whenever the autocomplete value is changed, this callback function will be executed.

 function (autocomplete, value) –
2

onOpen

Whenever autocomplete is opened, this callback function will be executed.

 function (autocomplete) –
3

onClose

Whenever autocomplete is closed, this callback function will be executed.

 function (autocomplete) –

自动完成模板

下表列出了Framework7中可用的Dropdown Autocomplete参数-

S.No Parameters & Description Type Default
1

navbarTemplate

It is standalone autocomplete navbar template.

 string –
2

itemTemplate

It is standalone template7 form item.

 string –
3

dropdownTemplate

It is template7 dropdown template.

 string –
4

dropdownItemTemplate

It is template7 dropdown list item.

 string –
5

dropdownPlaceholderTemplate

It is template7 dropdown placeholder item.

 string –

默认模板

以下是上述定义的模板参数的默认模板代码片段-

navbarTemplate


   

      

         {{#if material}}
            
               
            
         {{else}}
            
               
               {{#if inPopup}}
                  {{popupCloseText}}
               {{else}}
                  {{backText}}
               {{/if}}
            
         {{/if}}
      


      
{{pageTitle}}

      {{#if preloader}}
         

            

            

         

      {{/if}}

itemTemplate

  • 
   

    •

    dropdownTemplate

    
   
    
      
    
         
      
      
      
   
      
   
   {{#if preloader}}
      
      
         {{#if material}}
            {{materialPreloaderHtml}}
         {{/if}}
      
      
   {{/if}}

      dropdownItemTemplate

    • 
   

      •

      dropdownPlaceholderTemplate

    • 
   
      
      
      
         
      {{text}}

      • 自动完成方法

      下表指定了Framework7中可用的自动完成方法-

      S.No Methods & 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.

      自动完成属性

      下表指定了Framework7中可用的自动完成方法-

      S.No Properties & 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

      输出

      让我们执行以下步骤，看看上面给出的代码如何工作-

      • 将以上给定的HTML代码另存为服务器根文件夹中的autocomplete.html文件。

      • 以http：//localhost/autocomplete.html打开此HTML文件，并显示如下所示的输出。

      • 该示例提供了简单下拉菜单中的值自动完成，包含所有值的下拉菜单，带占位符的下拉菜单，独立自动完成等。