在自動完成的Framework7 Vue中是否存在組件？

Question

Framework7 Vue

鏈接到文檔沒有列出Autocomplete的組件。

有沒有使用現有組件在Vue中生成Autocomplete的方法？

---

所需的自動完成渲染HTML：

<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">Fruit</div> 
       <div class="item-after"></div> 
      </div> 
     </a> 
    </li> 
</ul> 

Answer 1

也許這就是它。我仍然工作。

<template lang='pug'> 
    f7-page 
     f7-navbar(title='About', back-link='Back', sliding='') 
     f7-block-title Multiple Values Dropdown Autocomplete 
     .list-block 
      ul 
      li 
       a#autocomplete-standalone-multiple.item-link.item-content.autocomplete-opener(href='#') 
       input(type='hidden') 
       .item-inner 
        .item-title Favorite Fruite 
        .item-after 
</template> 

<script> 
export default { 
    mounted() { 
    const myApp = this.$f7; 
    const $$ = this.$$; 

    // Fruits data demo array 
    const fruits = 'Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple'.split(
     ' ' 
    ); 

    // Multiple Values Dropdown Autocomplete 
    myApp.autocomplete({ 
     openIn: 'page', //open 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; 
     } 
     // Find matched items 
     for (var i = 0; i < fruits.length; i++) { 
      if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) 
      results.push(fruits[i]); 
     } 
     // Render items by passing array with result items 
     render(results); 
     }, 
     onChange: function(autocomplete, value) { 
     // Add item text value to item-after 
     $$('#autocomplete-standalone-multiple') 
      .find('.item-after') 
      .text(value.join(', ')); 
     // Add item value to input value 
     $$('#autocomplete-standalone-multiple') 
      .find('input') 
      .val(value.join(', ')); 
     } 
    }); 
    } 
}; 
</script>