Bootstrap Input Autocomplete

• Description
• Usage
  • Result
  • Code
    • index.html
    • source.json
• Installation
  • Manual installation
  • Automatic installation (NPM)
• License
• What's next, about me

Description

Autocomplete on a text input field with Bootstrap dropdown and Ajax data source

Usage

Result

Code

index.html

The example below don't have any styling to it

<!-- Input field -->
<input type="text" class="inputAutocomplete">

<script>
  $(document).ready(function(){
    $('.inputAutocomplete').inputAutocomplete({
      urlSource: 'source.json',  // Source file for dropdown values
      minLength: 1  // Minimum input length for autocompletion to show
    });
  });
</script>

source.json

POST: search=o (the input field have the value 'o')

[
  {
    "text": "Volvo",
    "value": "vlvo"
  },
  {"text": "Opel"},
  {"text": "Peugeot"},
  {"type": "separator"},
  {
    "text": "Tesla Motors",
    "value": "tsla"
  }
]

In each of the source json array value we have multiple elements:

Name | Values | Description --|---|-- text | string | Text shown in the dropdown value | string | (Optional) Value put in input field when clicking on the option type | string | Set to separator if you want a separating line

Installation

Manual installation

You need to download the sources and include them like this:

<!-- Bootstrap Input Autocomplete script -->
<script src="jquery.input_autocomplete.js"></script>

Some dependencies are required:

• jQuery 3.x (not the slim, it doesn't include Ajax which is required)
• Bootstrap 4.x

Automatic installation (NPM)

Install with NPM: npm i bootstrap-input-autocomplete

License

You are free to use this library for any project as long as my name is somewhere in the credits.

What's next, about me

I'm beginning in my coding life, I have a lot of project and ideas, if you liked my work feel free to leave a tip: