alpinjs-dropdown

Dropdown component for Alpine.js

Authors

• @tasvet

License

MIT

Badges

Demo

Demo link : Click here

Git Repo

Github : Click here

Installation

Install alpinjs-dropdown with npm

  npm install alpinejs alpinjs-dropdown
  or
  yarn add alpinejs alpinjs-dropdown

Usage/Examples

import :

  import Alpine from 'alpinejs';
  import dropdown from "alpinjs-dropdown";

  Alpine.plugin(dropdown);
  Alpine.start();

USAGE

  // html
  <input type="text" x-init="dropdown($el)" placeholder="Choose a User" />
  or
  <select x-init="dropdown($el)" placeholder="Select a User"></select>

  // js
  const dropdown = this.$dropdown(el, {
      limitPerScroll: 5,
      filterPlaceholder: "Search...",
      placeholder: "Select...",
      defaultItem: (event) => {
        return {
          text: "Create New : " + event?.filterText,
          onSelect: (event) => {
            console.log(event);
          },
        };
      }
    });

    // on item selected
    dropdown.onSelected((event) => {
      console.log(event);
    });

    //set selected item
    dropdown.setSelectItem(
      {
        text: 'item text'',
        value: 'item value',
        image: 'item image url', // optional
      }, true // set to true for not trigger onSelected event);

    // on type in filter input
    dropdown.onFilter((event) => {
      console.log(event.value);
    });

    // set data to dropdown listing
    dropdown.setData(
      [
        {
          text: 'item text'',
          value: 'item value',
          image: 'item image url', // optional
        },
        {
          text: 'item text'',
          value: 'item value',
          image: 'item image url', // optional
        }
      ]
    );

    // destroy
    el.destroy();