reandimo/bootcomplete.js

bootcomplete.js

bootcomplete.js

Lightweight AJAX autocomplete for Bootstrap

• Easy to use alternative to Typeahead/Bloodhound
• Returns the ID and value (label) of selected
• Results can be chained/filtered by other form values

Demo

Click here to see the examples in action.

Requirements

• jQuery
• Bootstrap 3
• Bootstrap 4

Usage

$('#input').bootcomplete({url:'/search.php',options});

JSON Response Object

  [
    {
      "id" : "someId",
      "label" : "some label name"
    }
  ]

Custom Dropdown

You can set a custom format for each option of the dropdown with dropdownFormat option:

var options = { 
		    url: 'someURL',
	            dropdownFormat: function( j ){
	                return '<a href="#" class="list-group-item" data-id="' + j.id + '"> <img src="'+ j.logo +'" width="50px" height="50px"/> ' +  j.label +'</a>'
	            }
         	  }

$('input[name=autocomplete]').bootcomplete(options)

Serverside JSON Response Object

[
  { 
    "id": "1",
    "label": "My Custom Option",
    "logo": "http:\/\/url\/web\/uploads\/avatars\/avatar-custom.png"
  }
]

Options

Option	Type	Default	Description
url	string	null	The url to submit query
method	string	GET	Request method (get, post)
wrapperClass	string	null	CSS Class used for the element wrapper
menuClass	string	null	CSS Class used for the suggestions menu
idField	string	null	Include hidden input field for selected option id (true,false) Default: true
idFieldName	string	null	Hidden input field name. Default: elementName_id
minLength	int	null	Minimum string length before sending query request
dataParams	json	null	Send additional data parameters with request. Usage: dataParams: {keyName : value}
formParams	jQuery Object	null	Send chained form parameters with request. Usage: formParams: {keyName : $('#formElement')}
beforeSelect	function	null	Callback, triggers before the population of dropdown list. Usage: beforeSelect: function(){ alert('try me') }
afterSelect	Function	null	Callback, triggers after select an option from the dropdown list. Usage: afterSelect: function(id, value) { alert('try me after') }
dropdownFormat	Function	null	Callback, returns a custom format for the dropdown list. Usage: dropdownFormat: function( j ) { return ''+ j.label + ' - ' + j.someExtraTextFromTheServerJSON +'' }