Autocomplete Noob Question - app.autocomplete is undefined

Questions
1

I’m not able to get a very simple example of an autocomplete component to run. It seems that the “app.autocomplete” object is always null. Given the following scenario I always get:

Uncaught TypeError: Cannot read property ‘create’ of undefined

I’m hoping given the info below someone can help me put my finger on what I’m missing…

This is my first F7 app. I’ve used a simple blank f7 core template and added an autocomplete component like so:

  <li class="item-content item-input inline-label">
    <div class="item-inner">
      <div class="item-title item-label">Fruit</div>
      <div class="item-input-wrap">
        <input id="autocomplete-dropdown" type="text" placeholder="Fruit">
      </div>
    </div>
  </li>

I’ve also added the corresponding sample js code to the section at the bottom of the html page:

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

    var autocompleteDropdownSimple = app.autocomplete.create({
      inputEl: '#autocomplete-dropdown',
      openIn: 'dropdown',
      source: function (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);
      }
    });
    export default { }
</script>

Now when the page renders in the browser, the app.autocomplete is always undefined so the create call always fails.

home.f7.html:4 Uncaught TypeError: Cannot read property ‘create’ of undefined
at eval (home.f7.html:4)
at Module…/src/pages/home.f7.html (app.js:4840)
at webpack_require (app.js:790)
at fn (app.js:101)
at eval (routes.js:2)
at Module…/src/js/routes.js (app.js:4828)
at webpack_require (app.js:790)
at fn (app.js:101)
at eval (app.js:11)
at Module…/src/js/app.js (app.js:4804)

I’m sure I’m missing something simple but I can’t find it. Any help would be greatly appreciated.

Thanks!
Gus

2

I thin that you are importing core f7. Not bundle. Can you share your import/script line?

3

These are the imports in my app.js file:

import $$ from 'dom7';

import Framework7 from 'framework7/framework7.esm.bundle.js';

// Import F7 Styles
import 'framework7/css/framework7.bundle.css';

// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.css';

// Import Cordova APIs
import cordovaApp from './cordova-app.js';

// Import Routes
import routes from './routes.js';

// Import main app component
import App from '../app.f7.html';

I have no imports and nothing in the script line in the html file with the dropdown component.

4

Use this.
Var app = this. $f7;

5

In what context should I try this? I have the following code in my app.js already:

var app = new Framework7({
  root: '#app', // App root element
  component: App, // App main component
  id: 'io.framework7.myapp', // App bundle ID
  name: 'My App', // App name
  theme: 'auto', // Automatic theme detection



  // App routes
  routes: routes,


  // Input settings
  input: {
    scrollIntoViewOnFocus: Framework7.device.cordova && !Framework7.device.electron,
    scrollIntoViewCentered: Framework7.device.cordova && !Framework7.device.electron,
  },
  // Cordova Statusbar settings
  statusbar: {
    iosOverlaysWebView: true,
    androidOverlaysWebView: false,
  },
  on: {
    init: function () {
      var f7 = this;
      if (f7.device.cordova) {
        // Init cordova APIs (see cordova-app.js)
        cordovaApp.init(f7);
      }
    },
  },
});
6

you are mixing concepts.
try using f7 components, then it should work
this code is just an example taken from the docs. also look the kitchen sink app to know how f7 works.

routes = [
  // ...
  {
    path: '/some-page/',
    // Component Object
    component: {
      template: `
        <div class="page">
          <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">{{title}}</div>
            </div>
          </div>
          <div class="page-content">
            <a @click="openAlert" class="red-link">Open Alert</a>
            <div class="list">
              <ul>
  <li class="item-content item-input inline-label">
    <div class="item-inner">
      <div class="item-title item-label">Fruit</div>
      <div class="item-input-wrap">
        <input id="autocomplete-dropdown" type="text" placeholder="Fruit">
      </div>
    </div>
  </li>
              </ul>
            </div>
          </div>
        </div>
      `,
      style: `
        .red-link {
          color: red;
        }
      `,
      data: function () {
        return {
          title: 'Component Page',
          names: ['John', 'Vladimir', 'Timo'],
        }
      },
      methods: {
        openAlert: function () {
          var self = this;
          self.$app.dialog.alert('Hello world!');
        },
      },
      on: {
        pageInit: function (e, page) {
          // do something on page init
             // Fruits data demo array
const app = page.app
    var fruits = ('Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple').split(' ');

    var autocompleteDropdownSimple = app.autocomplete.create({
      inputEl: '#autocomplete-dropdown',
      openIn: 'dropdown',
      source: function (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);
      }
    });
        },
      }
    },
  },
]

you can read all about f7 componet here:
https://framework7.io/docs/router-component.html

kitchen sink core

2 Likes
7

before app.autocomplete you must instanciate the “app” so try this.
var app=this.$f7;
or
var app= this.$app;

with this your problem was resolve

8

like that
" // Fruits data demo array var fruits = (‘Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple’).split(’ '); var app = this.$f7; var autocompleteDropdownSimple = app.autocomplete.create({ inputEl: ‘#autocomplete-dropdown’, openIn: ‘dropdown’, source: function (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); } }); export default { } /script"