Dynamic Autocomplete & Multi-select Plugin With jQuery - magicsearch

magicsearch is a robust, flexible, AJAX enabled jQuery plugin which allows the visitor to select single or multiple items from a predefined dropdown list when typing something into an input field. Similar to the autocomplete, typeahead and tags input plugins.

How to use it:

1. Make sure you first have jQuery library installed.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

2. Download and load the jQuery magicsearch plugin's file in the webpage.

<link href="jquery.magicsearch.css" rel="stylesheet">
<script src="jquery.magicsearch.min.js"></script>

3. Inert an input field into the webpage where needed.

<input class="magicsearch" id="basic" placeholder="search names...">

4. Prepare your data like this:

var dataSource = [
    {id: 1, firstName: 'Tim', lastName: 'Cook'},
    {id: 2, firstName: 'Eric', lastName: 'Baker'},
    {id: 3, firstName: 'Victor', lastName: 'Brown'},
    {id: 4, firstName: 'Lisa', lastName: 'White'},
    {id: 5, firstName: 'Oliver', lastName: 'Bull'},
    {id: 6, firstName: 'Zade', lastName: 'Stock'},
    {id: 7, firstName: 'David', lastName: 'Reed'},
    {id: 8, firstName: 'George', lastName: 'Hand'},
    {id: 9, firstName: 'Tony', lastName: 'Well'},
    {id: 10, firstName: 'Bruce', lastName: 'Wayne'},
];

5. Call the function with some options on the text field and done.

$('#basic').magicsearch({
  dataSource: dataSource,
  fields: ['firstName', 'lastName'],
  id: 'id',
  format: '%firstName% · %lastName%'
});

6. All default options to customize the plugin.

$('#basic').magicsearch({

  // array or string or function or url (for AJAX)
  dataSource: [],       

  // 'ajax'  
  type: '',

  // ajax options
  ajaxOptions: {},

  // unique id
  id: '',  

  // generate input[type="hidden"]?
  hidden: false, 

  // string or array to search through
  fields: '',  

  // data format           
  format: '',   

  // input format
  inputFormat: '',

  // max number of results
  maxShow: 5, 

  // clear the input when no option is selected
  isClear: true,

  // show selected options
  showSelected: true,

  // show dropdown button
  dropdownBtn: false,

  // max number of results in the dropdown
  dropdownMaxItem: 8,

  // multiple select
  multiple: false, 

  // true = no limit
  maxItem: true,

  // show multiple skins
  showMultiSkin: true,

  // multiple styles
  multiStyle: {},

  // multiple fields
  multiField: '', 

  // show on focus
  focusShow: false,

  // text when no results
  noResult: '',

  // custom skin
  skin: '', 

  // callbacks
  disableRule: function(data) {
      return false;
  },
  success: function($input, data) {
      return true;
  },
  afterDelete: function($input, data) {
      return true;
  }
  
});

7. API methods.

// clear the input field
$('#clear').trigger('clear');

// destroy the plugin
$('#destroy').trigger('destroy');

// update the args
$('#update').trigger('update', args);

// set selected item programmatically.
$('#multi').trigger('set', { id: '3,4' });

Changelog:

v1.0.4 (2019-01-24)

• Feature: Able to set selected item programmatically.

2017-05-01

• Fixed: Mutiple - Display issue with Firefox 51 (and next versions) 64 bits

2016-09-12

• change src to es6
• hide search box when click close btn
• update examples

2016-09-06

• change class name 'hover' to 'focus'

---

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