AJAX-enabled Autocomplete Plugin For Bootstrap - Search Suggest

AJAX-enabled Autocomplete Plugin For Bootstrap - Search Suggest
File Size: 79.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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: {}, 

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

delayUntilKeyup: false, 
indexId: 0, 
indexKey: 0, 
idField: "",
keyField: "", 
effectiveFields: [], 
effectiveFieldsAlias: {},   
searchFields: [], 
showHeader: false,
showBtn: true, 
allowNoKeyword: true,
multiWord: false, 
separator: ",", 
processData: processData, 
getData: getData, 
autoMinWidth: false,
autoDropup: false,
autoSelect: true, 
listAlign: "left",
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"
},  
listHoverStyle: 'background: #07d; color:#fff', 
listHoverCSS: "jhover", 
keyLeft: 37, 
keyUp: 38, 
keyRight: 39,
keyDown: 40, 
keyEnter: 13

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.

$("#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");
  });

Change log:

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

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.