Framework7-자동 완성

기술

자동 완성은 Framework7의 모바일 친화적이고 터치에 최적화 된 구성 요소로, 드롭 다운 방식 또는 독립형 방식 일 수 있습니다. JavaScript 메서드를 사용하여 Autocomplete 인스턴스를 생성하고 초기화 할 수 있습니다.

myApp.autocomplete(parameters)

어디에서 매개 변수가 자동 완성 인스턴스를 초기화하는 데 사용되는 오브젝트를해야합니다.

자동 완성 매개 변수

다음 표는 Framework7에서 사용 가능한 자동 완성 매개 변수를 나열합니다.

S. 아니 매개 변수 및 설명 유형 기본
1

openIn

드롭 다운, 팝업 또는 페이지로 사용할 수있는 자동 완성을 여는 방법을 정의합니다.

페이지
2

source

자동 완성 인스턴스, 검색 쿼리 및 렌더링 기능을 사용하여 일치하는 항목을 배열로 전달합니다.

함수 (자동 완성, 쿼리, 렌더링) -

valueProperty

일치하는 항목 객체의 키의 항목 값을 지정합니다.

신분증
4

limit

쿼리 당 자동 완성에 제한된 수의 항목을 표시합니다.

번호 -
5

preloader

프리 로더를 사용하여 자동 완성 레이아웃을 true로 설정하여 지정할 수 있습니다.

부울 그릇된
6

preloaderColor

프리 로더 색상을 지정합니다. 기본적으로 색상은 "검정색"입니다.

-
7

value

기본 선택 값으로 배열을 정의합니다.

정렬 -
8

textProperty

표시된 옵션의 제목으로 사용할 수있는 일치 항목 개체의 키의 항목 값을 지정합니다.

본문

독립형 자동 완성 매개 변수

다음 표는 Framework7에서 사용 가능한 독립형 자동 완성 매개 변수를 나열합니다.

S. 아니 매개 변수 및 설명 유형 기본
1

opener

독립형 자동 완성 페이지를 여는 문자열 또는 HTML 요소 매개 변수입니다.

문자열 또는 HTMLElement -
2

popupCloseText

자동 완성 팝업을 닫는 데 사용됩니다.

'닫기'

backText

자동 완성이 페이지로 열릴 때 뒤로 링크를 제공합니다.

'뒤'
4

pageTitle

자동 완성 페이지 제목을 지정합니다.

-
5

searchbarPlaceholderText

검색 창 자리 표시 자 텍스트를 지정합니다.

'검색'
6

searchbarCancelText

검색 창 취소 버튼 텍스트를 정의합니다.

'취소'
7

notFoundText

일치하는 요소가 없으면 텍스트를 표시합니다.

'아무것도 찾을 수 없음'
8

multiple

true로 설정하여 다중 선택을 선택할 수 있습니다.

부울 그릇된
9

navbarTheme

navbar의 색상 테마를 지정합니다.

-
10

backOnSelect

사용자가 값을 선택하면 true로 설정하여 자동 완성이 닫힙니다.

부울 그릇된
11

formTheme

양식의 색상 테마를 지정합니다.

-

드롭 다운 자동 완성 매개 변수

다음 표는 Framework7에서 사용 가능한 드롭 다운 자동 완성 매개 변수를 나열합니다.

S. 아니 매개 변수 및 설명 유형 기본
1

input

텍스트 입력에 사용되는 문자열 또는 HTML 요소입니다.

문자열 또는 HTMLElement -
2

dropdownPlaceholderText

드롭 다운 자리 표시 자 텍스트를 지정합니다.

-

updateInputValueOnSelect

선택시 입력 값을 true로 설정하여 업데이트 할 수 있습니다.

부울 진실
4

expandInput

목록보기에서 텍스트 입력을 확장하여 항목 입력 을 true 로 설정하여 드롭 다운 중에 전체 화면을 볼 수 있도록 할 수 있습니다.

부울 그릇된

자동 완성 콜백 함수

아래 표는 Framework7에서 사용 가능한 드롭 다운 자동 완성 매개 변수를 나열합니다.

S. 아니 매개 변수 및 설명 유형 기본
1

onChange

자동 완성 값이 변경 될 때마다이 콜백 함수가 실행됩니다.

함수 (자동 완성, 값) -
2

onOpen

자동 완성이 열릴 때마다이 콜백 함수가 실행됩니다.

기능 (자동 완성) -

onClose

자동 완성이 닫힐 때마다이 콜백 함수가 실행됩니다.

기능 (자동 완성) -

자동 완성 템플릿

다음 표는 Framework7에서 사용 가능한 드롭 다운 자동 완성 매개 변수를 나열합니다.

S. 아니 매개 변수 및 설명 유형 기본
1

navbarTemplate

독립형 자동 완성 navbar 템플릿입니다.

-
2

itemTemplate

독립형 template7 양식 항목입니다.

-

dropdownTemplate

template7 드롭 다운 템플릿입니다.

-
4

dropdownItemTemplate

template7 드롭 다운 목록 항목입니다.

-
5

dropdownPlaceholderTemplate

template7 드롭 다운 자리 표시 자 항목입니다.

-

기본 템플릿

다음은 위에 정의 된 템플릿 매개 변수에 대한 기본 템플릿 코드 스 니펫입니다.

navbarTemplate

<div class = "navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">
   <div class = "navbar-inner">
      <div class = "left sliding">
         {{#if material}}
            <a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
               <i class = "icon icon-back"></i>
            </a>
         {{else}}
            <a href = "#" class = "link {{#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}}
      </div>

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

itemTemplate

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

dropdownTemplate

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

dropdownItemTemplate

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

dropdownPlaceholderTemplate

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

자동 완성 방법

다음 표는 Framework7에서 사용할 수있는 자동 완성 방법을 지정합니다.

S. 아니 방법 및 설명
1

myAutocomplete.params

객체와 함께 전달되는 초기화 매개 변수를 정의합니다.

2

myAutocomplete.value

선택한 값으로 배열을 정의합니다.

myAutocomplete.opened

true로 설정된 경우 자동 완성이 열립니다.

4

myAutocomplete.dropdown

자동 완성 드롭 다운의 인스턴스를 지정합니다.

5

myAutocomplete.popup

자동 완성 팝업의 인스턴스를 지정합니다.

6

myAutocomplete.page

자동 완성 페이지의 인스턴스를 지정합니다.

7

myAutocomplete.pageData

자동 완성 페이지 데이터를 정의합니다.

8

myAutocomplete.searchbar

자동 완성 검색 창 인스턴스를 정의합니다.

자동 완성 속성

다음 표는 Framework7에서 사용할 수있는 자동 완성 방법을 지정합니다.

S. 아니 속성 및 설명
1

myAutocomplete.open()

드롭 다운, 팝업 또는 페이지로 사용할 수있는 자동 완성이 열립니다.

2

myAutocomplete.close()

자동 완성을 닫습니다.

myAutocomplete.showPreloader()

자동 완성 프리 로더를 보여줍니다.

4

myAutocomplete.hidePreloader()

자동 완성 프리 로더를 숨 깁니다.

5

myAutocomplete.destroy()

Autocomplete 프리 로더 인스턴스를 파괴하고 모든 이벤트를 제거합니다.

다음 예제는 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>
      <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">
               <div data-page = "home" class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Autcomplete</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
               
                  <div class = "page-content">
                     <div class = "content-block-title">Simple Dropdown Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Dropdown With Input Expand</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Dropdown With All Values</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Dropdown With Placeholder</div>
                     <div class = "list-block">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-title label">Country</div>
                              <div class = "item-input">
                                 <input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
                              </div>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Simple Standalone Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" id = "autocomplete-standalone" class = "item-link item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <div class = "item-inner">
                                    <div class = "item-title">Favorite Country</div>
                                    <div class = "item-after"></div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Popup Standalone Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" id = "autocomplete-standalone-popup" class = "item-link item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <div class = "item-inner">
                                    <div class = "item-title">Favorite Country</div>
                                    <div class = "item-after"></div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  
                     <div class = "content-block-title">Multiple Values Standalone Autocomplete</div>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "#" id = "autocomplete-standalone-multiple" class = "item-link item-content autocomplete-opener">
                                 <input type = "hidden">
                                 <div class = "item-inner">
                                    <div class = "item-title">Favorite Countries</div>
                                    <div class = "item-after"></div>
                                 </div>
                              </a>
                           </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 $$  =  Dom7;
         var mainView  =  myApp.addView('.view-main');
         
         // Countries data array
         var countries  =  ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' ');

         // 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'), //link 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'), //link 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>

산출

위의 코드가 어떻게 작동하는지보기 위해 다음 단계를 수행해 보겠습니다.

  • 위의 주어진 HTML 코드를 다음과 같이 저장하십시오. autocomplete.html 서버 루트 폴더의 파일.

  • 이 HTML 파일을 http : //localhost/autocomplete.html로 열면 출력이 아래와 같이 표시됩니다.

  • 이 예제는 간단한 드롭 다운의 값 자동 완성, 모든 값이있는 드롭 다운, 자리 표시자가있는 드롭 다운, 독립형 자동 완성 등을 제공합니다.