Multiple Select Plugin and Dynamic Autocomplete Part I

We are going to create Multiple Select Plugin and Dynamic Autocomplete. We used the magicsearch jQuery plugin to complete this tutorial. This plugin is flexible into an input field which the user allows choosing a single or multiple items in a dropdown list when they type in the input field. This work similar to the autocompletes function and the tags plugins. We are going to perform the Basic Search and Multiple Search. You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

How to use it.

1. We are going to include the jQuery Plugin. Copy and paste to the HEAD tag of your web page.
1. <link href="css/normalize.css" rel="stylesheet">
2. <link href="css/style.css" rel="stylesheet">
3. <link href="dist/jquery.magicsearch.css" rel="stylesheet">
2. Create simple markup for the input field where the user enters the name to search on the web page.
1. <div id="container">
2.     <h1>Simple Search</h1>
3.     <nav>
4.         <a class="active" href="index.html">Simple Search</a>
5.         <a href="multiple.html">Multiple Search</a>
6.     </nav>
7.     <section>
8.         <input class="magicsearch" id="simple-search" placeholder="search names...">
9.     </section>
10. </div>
3. And, this is the data. It looks like this,
1. <script>
2.     $(function() {
3.         var dataSource = [
4.             {id: 1, firstName: 'John', lastName: 'Doe'},
5.             {id: 2, firstName: 'Jane', lastName: 'Meyer'},
6.             {id: 3, firstName: 'Mark', lastName: 'Lloyd'},
7.             {id: 4, firstName: 'Wency', lastName: 'Joe'},
8.             {id: 5, firstName: 'Jennifer', lastName: 'Cortis'},
9.             {id: 6, firstName: 'John Mark', lastName: 'Natividad'},
10.             {id: 7, firstName: 'Mary Jane', lastName: 'Dy'},
11.             {id: 8, firstName: 'Arnold', lastName: 'Lucart'},
12.             {id: 9, firstName: 'Jenny', lastName: 'Lou'},
13.             {id: 10, firstName: 'Steve', lastName: 'Ly'},
14.         ];
15.     });
16. </script>

Output

Simple Search Multiple Search For the full source code, kindly click the "Download Code" button below. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.