Immybox.js

Nothing here yet

Knockout.js integration exists, but we haven't gotten the docs up to date yet. We're working on it!

View the source to see the KO integration (it's pretty simple).

§ Simple Example

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

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

Select a State

§ Options

§ choices

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

  $('#input-2').immybox({
  choices: [
    {text: 'Foo', value: 'foo'},
    {text: 'Bar', value: 'bar'}
  ]
});

Select One

§ maxResults

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

  $('#input-3').immybox({
    choices: [
      {text: 'Foo', value: 'foo'},
      {text: 'Bar', value: 'bar'}
    ],
    maxResults: 1
  });

Select One

§ showArrow

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

  $('#input-4').immybox({
    choices: [
      {text: 'Foo', value: 'foo'},
      {text: 'Bar', value: 'bar'}
    ],
    showArrow: false
  });

Select One

§ openOnClick

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

  $('#input-5').immybox({
    choices: [
      {text: 'Foo', value: 'foo'},
      {text: 'Bar', value: 'bar'}
    ],
    openOnClick: false
  });

Select One

§ 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.

  $('#input-6').immybox({
    choices: [
      {text: 'John Smith', value: 'jsmith', age: 31, employer: 'Smith Enterprises'},
      {text: 'Jane Doe', value: 'jdoe', age: 20, employer: 'National Security Agency'}
    ],
    formatChoice(query) {
      const reg = new RegExp("(" + query + ")", "i");
      return choice => (
        "<div class='mdl-grid mdl-grid--no-spacing'>" +
          "<div class='mdl-cell mdl-cell--6-col'>" +
            [
              choice.text.replace(reg, "<u>$1</u>"),
              choice.age
            ].join(", ") +
          "</div>" +
          "<div class='mdl-cell mdl-cell--6-col'>" +
            choice.employer +
          "</div>" +
        "</div>"
      );
    }
  });

Select One

§ 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.

  $('#input-7').immybox({
    choices: [
      {text: 'John Smith', value: 'jsmith', age: 31, employer: 'Smith Enterprises'},
      {text: 'Jane Doe', value: 'jdoe', age: 20, employer: 'National Security Agency'}
    ],
    filterFn(query) {
      const lowercase_query = query.toLowerCase();
      return choice => (
        choice.text.toLowerCase().indexOf(lowercase_query) >= 0 ||
        String(choice.age).toLowerCase().indexOf(lowercase_query) >= 0 ||
        choice.employer.toLowerCase().indexOf(lowercase_query) >= 0
      );
    },
    formatChoice(query) {
      const reg = new RegExp("(" + query + ")", 'i');
      return choice => (
        "<div class='mdl-grid mdl-grid--no-spacing'>" +
          "<div class='mdl-cell mdl-cell--6-col'>" +
            [
              choice.text.replace(reg, "<u>$1</u>"),
              String(choice.age).replace(reg, "<u>$1</u>")
            ].join(", ") +
          "</div>" +
          "<div class='mdl-cell mdl-cell--6-col'>" +
            choice.employer.replace(reg, "<u>$1</u>") +
          "</div>" +
        "</div>"
      );
    }
  });

Select One

§ 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).

  $('#input-8').immybox({
    choices: [
      {text: 'Foo', value: 'foo'},
      {text: 'Bar', value: 'bar'}
    ],
    defaultSelectedValue: 'bar'
  });

Select One