How to implement Standalone popup autocomplete searchbar in F7+Vuejs (Version 5) Not working

1

Hello,

I am trying to implement the standalone autocomplete search bar as seen on the kitchen sink source code here https://github.com/framework7io/framework7-vue/blob/master/kitchen-sink/src/pages/autocomplete.vue.

I installed with framework7-vuejs-CLI version 5.x, although the kitchen sink code is running on F7 v2.3.0 and vuejs 2.5.x.

The issue I am facing is that no action is called when i click on the link to initiate the process. Here’s my implementation below.

<div class="list">
            <div class="block-header">Popup Autocomplete</div>
            <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 Fruite</div>
                            <div class="item-after"></div>
                        </div>
                    </a>
                </li>
            </ul>
</div>

Then, the js part is thus;

     export default {
        data() {
            return {
                fruits: 'Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple'.split(' '),
            }
        },
        on: {
            pageBeforeRemove() {
                const self = this;
                self.autocompleteStandalonePopup.destroy();
            },
            pageInit() {
                const self = this;
                const app = self.$f7;
                const fruits = self.fruits;
                const $ = self.$$;

                self.autocompleteStandalonePopup = app.autocomplete.create({
                    openIn: 'popup', // open in page
                    openerEl: '#autocomplete-standalone-popup', // link that opens autocomplete
                    closeOnSelect: true, // go back after we select something
                    source(query, render) {
                        const results = [];
                        if (query.length === 0) {
                            render(results);
                            return;
                        }
                        // Find matched items
                        for (let i = 0; i < fruits.length; i += 1) {
                            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
                        }
                        // Render items by passing array with result items
                        render(results);
                    },
                    on: {
                        change(value) {
                            // Add item text value to item-after
                            $('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
                            // Add item value to input value
                            $('#autocomplete-standalone-popup').find('input').val(value[0]);
                        },
                    },
                });
            }
        },

Can someone advice me on how to go about this please, thanks.

1 Like
2

What about initialize the autocomplete popup inside mounted, instead of pageInit?

export default {
    ...
    mounted() {
      this.$f7ready((f7) => {
        ...
        self.autocompleteStandalonePopup = f7.autocomplete.create({
        ...
      });
    },
  };