JBootstrapAutocomplete

2019-11-15 -> 2021-03-05

A port of the bootstrap-autocomplete plugin for the universe framework.

Install

Using the planet installer via light-cli

lt install Ling.JBootstrapAutocomplete

Using the uni command.

uni import Ling/JBootstrapAutocomplete

Or just download it and place it where you want otherwise.

What is this

This planet is a port from the bootstrap autocomplete plugin to the universe.

I also included the blood hound engine from twitter typeahead and some custom css.

See the documentation for bloodhound for more details, and/or the typeahead examples.

I host it as a planet for dependency resolution convenience inside my universe framework, but all credits goes to the guy who wrote this plugin and posted it on jqueryscript.net.

How to use

See the documentation for bootstrap-autocomplete for more details.

First type your html:

<input class="typeahead form-control">

Then define your sources.

You can either:

define sources directly
load the data from an external JSON file

Define sources directly

$(".typeahead").typeahead({
  source: [
    {id: "id1", name: "jQuery"},
    {id: "id2", name: "Script"},
    {id: "id3", name: "Net"}
  ]
});

Load the data from an external JSON file

$(".typeahead").typeahead({ 
    source: function (query, process) {
        $.ajax({
            url: '/test.json',
            type: 'POST',
            dataType: 'JSON',
            success: function (data) {
                process(data);
            }
        });
    },
});

Then call the plugin:

$(".typeahead").typeahead({ 

  // data source
  source: [],

  // how many items to show
  items: 8,

  // default template
  menu: '<ul class="typeahead dropdown-menu" role="listbox"></ul>',
  item: '<li><a class="dropdown-item" href="#" role="option"></a></li>',
  headerHtml: '<li class="dropdown-header"></li>',
  headerDivider: '<li class="divider" role="separator"></li>',
  itemContentSelector:'a',

  // min length to trigger the suggestion list
  minLength: 1,

  // number of pixels the scrollable parent container scrolled down
  scrollHeight: 0,

  // auto selects the first item
  autoSelect: true,

  // callbacks
  afterSelect: $.noop,
  afterEmptySelect: $.noop,

  // adds an item to the end of the list
  addItem: false,

  // delay between lookups
  delay: 0,
  
});

History Log

1.1.4 -- 2021-05-31
- Removing trailing plus in lpi-deps file (to work with Light_PlanetInstaller:2.0.0 api
1.1.3 -- 2021-03-05
- update README.md, add install alternative
1.1.2 -- 2020-12-08
- Fix lpi-deps not using natsort.
1.1.1 -- 2020-12-04
- Add lpi-deps.byml file
1.1.0 -- 2019-11-15
- add bloodhound and custom css
1.0.2 -- 2019-11-15
- fix README.md sources
1.0.1 -- 2019-11-15
- fix README.md typo
1.0.0 -- 2019-11-15
- initial commit