Select2 Integration

by kevinfiol

Level: beginner • Mithril.js Version: latest

This example shows the integration of select2 3rd-party library. Whit it it's possible to search for an item and use the up/down keys to select an item.

Live Example

Dependencies

,,
Type Name URL
scriptmithril@latesthttps://unpkg.com/mithril@latest
scriptjquery@3.3.1https://unpkg.com/jquery@3.3.1
scriptselect2@4.0.6-rc.1https://unpkg.com/select2@4.0.6-rc.1

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

JavaScript

const App = {
  view: () => m('div', [
    m('p', 'my select'),
    m('select', {
      name: 'states',
      oncreate: ({dom}) => $(dom).select2()
    }, [
      m('option', { value: 'AL' }, 'Alabama'),
      m('option', { value: 'WI' }, 'Wisconsin')
    ])
  ])
};

m.mount(document.body, App)

The snippet requires the latest version of Mithril.js framework. It is ideal for beginners showing some basic recipes.

In this example we can see an example of Mithril.js' m.mount API method, besides it core m() hyperscript function. It is also showing the oncreate hook, which is one of several Mithril.js' lifecycle methods.

The code sample was authored by kevinfiol. It was last modified on 26 October 2021. Want to see more examples written by kevinfiol? Then Click here.

Contribute

Do you see some improvements, that could be addressed here? Then let me know by opening an issue. As an alternative, you can fork the repository on GitHub, push your commits and send a pull request. To start your work, click on the edit link below. Thank you for contributing to this repo.

See more code examples  •  Edit this example on GitHub