Immybox Demo

Simple example

Call .immybox() on any input[type=text] element, and pass in some choices.

$('#input1').immybox({
  choices: [
    {text: 'Alabama', value: 'AL'},
    {text: 'Alaska', value: 'AK'},
    ...
    {text: 'Wisconsin', value: 'WI'},
    {text: 'Wyoming', value: 'WY'}
  ],
  defaultSelectedValue: 'LA'
})

Result:

Options

You can customize the behavior of immybox using the following options:

choices

An array of choice objects used to populate the autocomplete list. Each object should have at least text and value properties. Default: []

maxResults

The maximum number of choices to show in the autocomplete list. Default: 50

showArrow

Show a small down arrow on the right side of the input. Default: true

openOnClick

Should the results list show on click, or wait for user input before showing. Default: true

filterFn

A function for determining whether or not a choice matches the entered query. Accepts query as arguments and must return a function that takes choice as argument and returns a boolean. Default function case insensitive "contains" matching.

formatChoice

A function for formatting choices. Accepts query as arguments and must return a function that takes choice as argument and returns a string (optionally containing HTML). The default formatter just returns choice.text, underlining all parts of it that match query.

NB: for backward-compatibility with earlier versions of immybox, formatChoice can take two arguments (choice, query). If two arguments are provided, the function will be called for each choice

defaultSelectedValue

The value that will be selected by default in the autocomplete list. Default: undefined Possible values: String (the value of the choice; if not found in the choices array, it will act like null), null (will tell immybox that nothing should be selected by default).