Simple Dynamic Autocomplete Plugin For Bootstrap - shAutocomplete

shAutocomplete is a lightweight jQuery plugin that adds the smart, fast autocomplete functionality to Bootstrap 3/4 framework. The plugin displays a dropdown list populated with pre-defined suggestions while typing into a text input.

How to use it:

1. Load the style sheet bootstrap-autocomplete.css and JavaScript bootstrap-autocomplete.js in your Bootstrap page.

<!-- CSS -- >
<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<link href="/path/to/sh-autocomplete.css" rel="stylesheet">

<!-- JAVASCRIPT -- >
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/path/to/sh-autocomplete.js"></script>

2. Call the function on the target input field and define your own suggestions in the JSON as follows:

// request.json
{
    "name": "jQuery Script",
    "description": "Best Free jQuery Plugins",
    "author": "jQuery Script",
    "licenses": "Liceses: MIT or GPL"
}

$('input').autocomplete({
  request: {url: "request.json"}
});

3. Specify how many time will be awaited to process menu search (in milliseconds).

$('input').autocomplete({
  timeout: 1000
});

4. Set the maximal dropdown height in pixels. Set null to no limit.

$('input').autocomplete({
  maxHeight: null
});

5. If maxHeight option is set to null and autocomplete dropdown is too long, this is the margin of the dropdown from the bottom of the viewport

$('input').autocomplete({
  bottomSpace: 20
});

6. Execute a function when your user chooses an item from the autofill dropdown.

$('input').autocomplete({
  /** 
  * @param input DOM element for search input field
  * @param item DOM element for choosen option */

  choose: function(input, item) {
  console.log($(item).data());
  },
});

7. Execute a function after user input.

$('input').autocomplete({
  input: function(input) {
    console.log('Input: ' + input.value);
  },
});

8. Specify how the chosen item will be transferred to the input field.

$('input').autocomplete({
  transfer: function(input, item) {
    $(input).val($(item).find('a').text());
  }
});

9. Set the Bootstrap version.

$('input').autocomplete({
  bootstrapVersion: 3, // or 4
});

10. The code function that is called 1 second (deafault timeout option) after last user input. The function must always call passed fill() callback with object parameter represents the content of the menu. In case of an error, autofill() must call fill() without parameters.

$('input').autocomplete({
  
  /*
  * @param input DOM element for search input field
  * @param fill function callback 
  */
    autofill: function(input, fill) {

        $.ajax({

            method: 'get',
            dataType: 'json',
            url: o.requestUrl + encodeURIComponent(input.value),

            success: function(data) {
                fill(data);
            },

            error: function() {
                fill();
                if (o.debug)
                    console.log('shAutofill search request failed!');
            }

        });
    },
    
});

11. Set the minimum characters (excluding spaces) to perform search request.

$('input').autocomplete({
  minChars: 3
});

12. Set the limit results. null means no limit.

$('input').autocomplete({
  limit: null
});

13. Enable/disable search cache.

$('input').autocomplete({
  cache: true
});

14. Remove unnecessary empty spaces from search string.

$('input').autocomplete({
  normalizeQuery: true
});

15. Remove unnecessary empty spaces from search string.

$('input').autocomplete({
  normalizeQuery: true
});

16. Convert the result from request to data for the menu.

$('input').autocomplete({
  result: function(data) {
    return data;
  },
});

17. Perform actions when the search starts and ends.

$('input').autocomplete({
  searchStart: function(input) {},
  searchEnd: function(input) {}
});

Change log:

2018-02-05

• v0.5

2017-11-07

• bugfix

2017-11-06

• bugfix

2017-11-04

• menu resizing & scrolling fixes

2017-11-02

• Added more options and callbacks.

---

This awesome jQuery plugin is developed by sunhater. For more Advanced Usages, please check the demo page or visit the official website.