Autocomplete and Login Screen

Autocomplete suggests values as you type, in a dropdown under the input or in a page (the default) or popup with its own searchbar. Your source(query, render) calls render(items) when matches are ready, so it can wait for a server. "Add a book" offers books not yet in the cart:

The Add a book autocomplete in src/pages/checkout.f7

      autocomplete = $f7.autocomplete.create({
        inputEl: $el.value.find('#add-book'),
        openIn: 'dropdown',
        textProperty: 'title',
        limit: 4,
        source(query, render) {
          const q = query.trim().toLowerCase();
          if (!q) return render([]);
          render(books.filter((b) => b.title.toLowerCase().includes(q)
            && !cart.value.some((l) => l.id === b.id)));
        },
        on: {
          change([book]) {
            $store.dispatch('addToCart', book.id);
            $el.value.find('#add-book').val('');
          },
        },
      });

With books 1 and 5 in the cart, "the" offered only Patterns of the Deep Web, the match in bold (panel C above); tapping it added a stepper row.

A login screen is a full-screen modal: a login-screen div holding a page with a login-screen-title and a form. A link with login-screen-open and data-login-screen="#signin" opens it and login-screen-close closes it. The checkout's Sign in link opens one; it is only a demo, since real sign-in belongs on a server.

MENU