Dynamic Autocomplete & Multi-select Plugin With jQuery - magicsearch

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.

  dataSource: dataSource,
  fields: ['firstName', 'lastName'],
  id: 'id',
  format: '%firstName% ยท %lastName%'

6. All default options to customize the plugin.

  // 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
// destroy the plugin
// update the args
$('#update').trigger('update', args);
// set selected item programmatically.
$('#multi').trigger('set', { id: '3,4' });


v1.0.4 (2019-01-24)

  • Feature: Able to set selected item programmatically.


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


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


  • 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.

  • Publication date: 24.01.2019
  • Source