Question

链接到文档未列出Autocomplete的组件。

有没有办法使用现有组件在Vue中生成自动完成？

呈现自动填充所需的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>

Answer 2

F7-Vue f7-list-input & f7-input (search for autocomplete)的自动完成属性可以为您提供一个开始。使用F7 autocomplete property configuration。

您可能还想研究smart-select，为您提供更多自动完成替换的移动样式。

Framework7 Vue中是否有自动完成组件？

2 个答案: