AJAX-enabled Autocomplete Plugin For Bootstrap - Search Suggest

Search Suggest is a feature-rich, Ajax-enabled jQuery autocomplete / autosuggest plugin for Bootstrap framework.

Features:

• Based on Bootstrap dropdown component.
• Allows searching for multiple keywords.
• Loads data from any resources such as JSON, URL, JavaScript API, JS array, etc.
• Keyboard interaction.
• Lots of customizable options.

Basic usage:

1. Include the Bootstrap Search Suggest plugin together with the jQuery library and Bootstrap framework on your web project.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="bootstrap-suggest.js"></script>

2. Apply the plugin to your text field and load predefined data from an JSON file.

$("#input").bsSuggest({
  url: "data.json",
  searchFields: [ "shortAccount"],
  effectiveFieldsAlias:{userName: "Name"},*/
  idField: "userId",
  keyField: "userName"
})

{
  "message": "",
  "value": [
    {
      "userName": "Mark",
      "shortAccount": "chunyun",
      "userId": 20001
    }, {
      "userName": "orion-01",
      "shortAccount": "orion-01",
      "userId": 20000
    }, {
      "userName": "Otto",
      "shortAccount": "muxiaochen",
      "userId": 20002
    }
  ],
  ...
  "code": 200,
  "redirect": ""
}

3. Apply the plugin to your text field and load predefined data from local data.

$("#input").bsSuggest({
  indexId: 2, 
  indexKey: 1, 
  data: {
    'value':[
        {'id':'0','word':'Mark','description':'http://www.1.com'},
        {'id':'1','word':'Jacob','description':'http://www.2.com'},
        {'id':'2','word':'Larry','description':'http://www.3.com'},
        {'id':'3','word':'Thornton','description':'http://www.4.com'}
    ],
    'defaults':'http://www.1.com'
  }
})

4. All the configuration options with default values.

// url
url: null, 

// null = use json data
jsonp: null,

// data to use
data: {value: []}, 

indexId: 0, 
indexKey: 0, 
idField: "",
keyField: "", 
autoSelect: true,
allowNoKeyword: true,

// 'url' or 'firstByUrl'
getDataMethod: "firstByUrl", 

ignorecase: false,
effectiveFields: [], 
effectiveFieldsAlias: {},   
searchFields: [], 
twoWayMatch: true,
multiWord: false,
multiWord: false, 
separator: ",", 
delay: 300, 
emptyTip: '',
searchingTip: 'Search...',

autoDropup: false,
autoMinWidth: false,
showHeader: false,
showBtn: true, 
inputBgColor: '', 
inputWarnColor: "rgba(255,0,0,.1)",
listStyle: {
  'padding-top': 0,
  'max-height': '375px',
  'max-width': '800px',
  'overflow': 'auto',
  'width': 'auto',
  'transition': '0.3s',
  '-webkit-transition': '0.3s',
  '-moz-transition': '0.3s',
  '-o-transition': '0.3s'
}, 
listAlign: "left",
listHoverStyle: 'background: #07d; color:#fff',
listHoverCSS: 'jhover', 
clearable: false, 

// key codes
keyLeft: 37, 
keyUp: 38, 
keyRight: 39,
keyDown: 40, 
keyEnter: 13,

// functions
fnProcessData: processData,
fnGetData: getData,
fnAdjustAjaxParam: null, 
fnPreprocessKeyword: null,
fnAjaxFail: null, 

5. API methods.

// disable the plugin
$("input#test").bsSuggest("disable");

// enable the plugin
$("input#test").bsSuggest("enable");

// destroy the plugin
$("input#test").bsSuggest("destroy");

// output the version
$("input#test").bsSuggest("version");

6. Events available.

$("#input")
  .on("dataRequestSuccess", function (event, result) {
      console.log(result);
  })
  .on('onSetSelectValue', function (e, keyword) {
      console.log('onSetSelectValue: ', keyword);
  })
  .on('onUnsetSelectValue', function (e) {
      console.log("onUnsetSelectValue");
  });
  .on('onShowDropdown', function (e, data) {
      console.log('onShowDropdown', e.target.value, data);
  })
  .on('onHideDropdown', function (e, data) {
      console.log('onHideDropdown', e.target.value, data);
  })

Changelog:

2018-10-18

• Improvement.

2018-10-09

• v0.1.25: bugfix

2018-05-31

• v0.1.24: update for showDropMenu and hideDropMenu

2018-03-19

• Bugfixed.

2017-12-07

• v0.1.23: Bugfixed.

2017-09-06

• v0.1.21

2017-07-06

• improvement.

2017-04-12

• version 0.1.18

2016-12-21

• fixed for Chrome 52+

2016-12-08

• compatible with Bootstrap 4

2016-03-21

• added fnAdjustAjaxParam、fnPreprocessKeyword parameters.

2016-02-22

• added autoSelect parameter.

---

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