Framework7 - Autocomplete-alljchome-开发者的教程家园

Framework7 Tutorial

Framework7 Components

Framework7 Styling

Framework7 Templates

Framework7 Fast Clicks

Framework7 Useful Resources

Selected Reading

Framework7 - Autocomplete

Description

Autocomplete is a Framework7 s mobile friendly and touch optimized component, which can be as dropdown or in standalone way. You can create and initiapze Autocomplete instance by using the JavaScript method −

myApp.autocomplete(parameters)

Where parameters are required objects used to initiapze the Autocomplete instance.

Autocomplete Parameters

The following table psts the available Autocomplete parameters in 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	pmit It displays the pmited 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

Standalone Autocomplete Parameters

The following table psts the available Standalone Autocomplete parameters in 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 pnk 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	-

Dropdown Autocomplete Parameters

The following table psts the available Dropdown Autocomplete parameters in Framework7 −

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

Autocomplete Callbacks Functions

The below table psts available Dropdown Autocomplete parameters in Framework7 −

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

S.No

Parameters & Description

Type

Default

onChange

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

function (autocomplete, value)

onOpen

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

function (autocomplete)

onClose

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

function (autocomplete)

Autocomplete Templates

The following table psts the available Dropdown Autocomplete parameters in Framework7 −

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 pst item.	string	-
5	dropdownPlaceholderTemplate It is template7 dropdown placeholder item.	string	-

Default templates

Following are the default template code snippets for the above defined templates parameters −

navbarTemplate

<span class = "navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">
   <span class = "navbar-inner">
      <span class = "left spding">
         {{#if material}}
            <a href = "#" class = "pnk {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
               <i class = "icon icon-back"></i>
            </a>
         {{else}}
            <a href = "#" class = "pnk {{#if inPopup}}close-popup{{else}}back{{/if}}">
               <i class = "icon icon-back"></i>
               {{#if inPopup}}
                  <span>{{popupCloseText}}</span>
               {{else}}
                  <span>{{backText}}</span>
               {{/if}}
            </a>
         {{/if}}
      </span>

      <span class = "center spding">{{pageTitle}}</span>
      {{#if preloader}}
         <span class = "right">
            <span class = "autocomplete-preloader preloader 
               {{#if preloaderColor}}
                  preloader-{{preloaderColor}}
               {{/if}}">
            </span>
         </span>
      {{/if}}
   </span>
</span>

itemTemplate

<p>
   <label class = "label-{{inputType}} item-content">
      <input type = "{{inputType}}" name = "{{inputName}}" value = "{{value}}" {{#if selected}}checked{{/if}}>
      {{#if material}}
         <span class = "item-media">
            <i class = "icon icon-form-{{inputType}}"></i>
         </span>
            
         <span class = "item-inner">
            <span class = "item-title">{{text}}</span>
         </span>
      {{else}}
         {{#if checkbox}}
            <span class = "item-media">
               <i class = "icon icon-form-checkbox"></i>
            </span>
         {{/if}}
            
         <span class = "item-inner">
            <span class = "item-title">{{text}}</span>
         </span>
      {{/if}}
   </label>
</p>

dropdownTemplate

<span class = "autocomplete-dropdown">
   <span class = "autocomplete-dropdown-inner">
      <span class = "pst-block">
         <ul></ul>
      </span>
   </span>
   
   {{#if preloader}}
      <span class = "autocomplete-preloader preloader 
         {{#if preloaderColor}}
            preloader-{{preloaderColor}}
         {{/if}}">
         {{#if material}}
            {{materialPreloaderHtml}}
         {{/if}}
      </span>
   {{/if}}
</span>

dropdownItemTemplate

<p>
   <label class = "{{#unless placeholder}}label-radio{{/unless}} item-content" data-value = "{{value}}">
      <span class = "item-inner">
         <span class = "item-title">{{text}}</span>
      </span>
   </label>
</p>

dropdownPlaceholderTemplate

<p class = "autocomplete-dropdown-placeholder">
   <span class = "item-content">
      <span class = "item-inner">
         <span class = "item-title">{{text}}</span>
      </span>
   </label>
</p>

Autocomplete Methods

The following table specifies Autocomplete methods available in Framework7 −

S.No	Methods & Description
1	myAutocomplete.params Defines the initiapzation 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.

Autocomplete Properties

The following table specifies Autocomplete methods available in 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.

Example

The following example demonstrates the use of autocomplete parameters hiding in the 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>Autocomplete</title>
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.min.css" />
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <span class = "views">
         <span class = "view view-main">
            <span class = "pages">
               <span data-page = "home" class = "page navbar-fixed">
               
                  <span class = "navbar">
                     <span class = "navbar-inner">
                        <span class = "left"> </span>
                        <span class = "center">Autcomplete</span>
                        <span class = "right"> </span>
                     </span>
                  </span>
               
                  <span class = "page-content">
                     <span class = "content-block-title">Simple Dropdown Autocomplete</span>
                     <span class = "pst-block">
                        <ul>
                           <p class = "item-content">
                              <span class = "item-title label">Country</span>
                              <span class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
                              </span>
                           </p>
                        </ul>
                     </span>
                  
                     <span class = "content-block-title">Dropdown With Input Expand</span>
                     <span class = "pst-block">
                        <ul>
                           <p class = "item-content">
                              <span class = "item-title label">Country</span>
                              <span class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
                              </span>
                           </p>
                        </ul>
                     </span>
                  
                     <span class = "content-block-title">Dropdown With All Values</span>
                     <span class = "pst-block">
                        <ul>
                           <p class = "item-content">
                              <span class = "item-title label">Country</span>
                              <span class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
                              </span>
                           </p>
                        </ul>
                     </span>
                  
                     <span class = "content-block-title">Dropdown With Placeholder</span>
                     <span class = "pst-block">
                        <ul>
                           <p class = "item-content">
                              <span class = "item-title label">Country</span>
                              <span class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
                              </span>
                           </p>
                        </ul>
                     </span>
                  
                     <span class = "content-block-title">Simple Standalone Autocomplete</span>
                     <span class = "pst-block">
                        <ul>
                           <p>
                              <a href = "#" id = "autocomplete-standalone" class = "item-pnk item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <span class = "item-inner">
                                    <span class = "item-title">Favorite Country</span>
                                    <span class = "item-after"></span>
                                 </span>
                              </a>
                           </p>
                        </ul>
                     </span>
                  
                     <span class = "content-block-title">Popup Standalone Autocomplete</span>
                     <span class = "pst-block">
                        <ul>
                           <p>
                              <a href = "#" id = "autocomplete-standalone-popup" class = "item-pnk item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <span class = "item-inner">
                                    <span class = "item-title">Favorite Country</span>
                                    <span class = "item-after"></span>
                                 </span>
                              </a>
                           </p>
                        </ul>
                     </span>
                  
                     <span class = "content-block-title">Multiple Values Standalone Autocomplete</span>
                     <span class = "pst-block">
                        <ul>
                           <p>
                              <a href = "#" id = "autocomplete-standalone-multiple" class = "item-pnk item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <span class = "item-inner">
                                    <span class = "item-title">Favorite Countries</span>
                                    <span class = "item-after"></span>
                                 </span>
                              </a>
                           </p>
                        </ul>
                     </span>
                  </span> 
                  
               </span>
            </span>
         </span>
      </span>
      
      <script type  =  "text/javascript" 
         src  =  "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp  =  new Framework7();
         var $$  =  Dom7;
         var mainView  =  myApp.addView( .view-main );
         
         // Countries data array
         var countries  =  ( India Africa Austrapa NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh ).sppt(   );

         // Simple Dropdown
         var autocompleteDropdownSimple  =  myApp.autocomplete ({
            input:  #autocomplete-dropdown ,
            openIn:  dropdown ,
            
            source: function (autocomplete, query, render) {
               var results  =  [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Dropdown with input expand
         var autocompleteDropdownExpand = myApp.autocomplete ({
            input:  #autocomplete-dropdown-expand ,
            openIn:  dropdown ,
            expandInput: true,   // expandInput used as item-input in List View will be expanded to full screen wide
                                 //during dropdown
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               // Find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Dropdown with all values
         var autocompleteDropdownAll = myApp.autocomplete ({
            input:  #autocomplete-dropdown-all ,
            openIn:  dropdown ,
            
            source: function (autocomplete, query, render) {
               var results = [];
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Dropdown with placeholder
         var autocompleteDropdownPlaceholder = myApp.autocomplete ({
            input:  #autocomplete-dropdown-placeholder ,
            openIn:  dropdown ,
            dropdownPlaceholderText:  Type as "India" ,
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
                  
               // Display the items by passing array with result items
               render(results);
            }
         });

         // Simple Standalone
         var autocompleteStandaloneSimple = myApp.autocomplete ({
            openIn:  page , //open in page
            opener: $$( #autocomplete-standalone ), //pnk that opens autocomplete
            backOnSelect: true, //go back after we select something
            
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
                     results.push(countries[i]);
               }
               // Display the items by passing array with result items
               render(results);
            },
               
            onChange: function (autocomplete, value) {
               // Here add the item text value to item-after
               $$( #autocomplete-standalone ).find( .item-after ).text(value[0]);
               
               // You can add item value to input value
               $$( #autocomplete-standalone ).find( input ).val(value[0]);
            }
         });

         // Standalone Popup
         var autocompleteStandalonePopup = myApp.autocomplete ({
            openIn:  popup , // Opens the Autocomplete in page
            opener: $$( #autocomplete-standalone-popup ), // It will open standalone autocomplete popup
            backOnSelect: true, //After selecting item, then go back to page
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
            
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
               }
            
               // Display the items by passing array with result items
               render(results);
            },
            
            onChange: function (autocomplete, value) {
               // Here add the item text value to item-after
               $$( #autocomplete-standalone-popup ).find( .item-after ).text(value[0]);
               
               // You can add item value to input value
               $$( #autocomplete-standalone-popup ).find( input ).val(value[0]);
            }
         });

         // Multiple Standalone
         var autocompleteStandaloneMultiple = myApp.autocomplete ({
            openIn:  page , //Opens the Autocomplete in page
            opener: $$( #autocomplete-standalone-multiple ), //pnk that opens autocomplete
            multiple: true, //Allow multiple values
            source: function (autocomplete, query, render) {
               var results = [];
               if (query.length === 0) {
                  render(results);
                  return;
               }
               
               // You can find matched items
               for (var i = 0; i < countries.length; i++) {
                  if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
               }
               
               // Display the items by passing array with result items
               render(results);
            },
            
            onChange: function (autocomplete, value) {
               // Here add the item text value to item-after
               $$( #autocomplete-standalone-multiple ).find( .item-after ).text(value.join( ,  ));
               
               // You can add item value to input value
               $$( #autocomplete-standalone-multiple ).find( input ).val(value.join( ,  ));
            }
         });
      </script>
   </body>

</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given HTML code as autocomplete.html file in your server root folder.

Open this HTML file as http://localhost/autocomplete.html and the output is displayed as shown below.

The example provides autocomplete of values in simple dropdown, dropdown with all values, dropdown with placeholder, standalone autocomplete etc.