This time I will share jQuery Plugin and tutorial about Dynamic Autocomplete & Multi-select Plugin With jQuery – magicsearch, hope it will help you in programming stack.
| File Size: | 76.9 KB |
|---|---|
| Views Total: | 46984 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
1 |
<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.
1 |
<link href="jquery.magicsearch.css" rel="stylesheet"> |
2 |
<script src="jquery.magicsearch.min.js"></script> |
3. Inert an input field into the webpage where needed.
1 |
<input class="magicsearch" id="basic" placeholder="search names..."> |
4. Prepare your data like this:
01 |
var dataSource = [ |
02 |
{id: 1, firstName: 'Tim', lastName: 'Cook'}, |
03 |
{id: 2, firstName: 'Eric', lastName: 'Baker'}, |
04 |
{id: 3, firstName: 'Victor', lastName: 'Brown'}, |
05 |
{id: 4, firstName: 'Lisa', lastName: 'White'}, |
06 |
{id: 5, firstName: 'Oliver', lastName: 'Bull'}, |
07 |
{id: 6, firstName: 'Zade', lastName: 'Stock'}, |
08 |
{id: 7, firstName: 'David', lastName: 'Reed'}, |
09 |
{id: 8, firstName: 'George', lastName: 'Hand'}, |
10 |
{id: 9, firstName: 'Tony', lastName: 'Well'}, |
11 |
{id: 10, firstName: 'Bruce', lastName: 'Wayne'}, |
12 |
]; |
5. Call the function with some options on the text field and done.
1 |
$('#basic').magicsearch({ |
2 |
dataSource: dataSource, |
3 |
fields: ['firstName', 'lastName'], |
4 |
id: 'id', |
5 |
format: '%firstName% · %lastName%' |
6 |
}); |
6. All default options to customize the plugin.
01 |
$('#basic').magicsearch({ |
02 |
03 |
// array or string or function or url (for AJAX) |
04 |
dataSource: [], |
05 |
06 |
// 'ajax' |
07 |
type: '', |
08 |
09 |
// ajax options |
10 |
ajaxOptions: {}, |
11 |
12 |
// unique id |
13 |
id: '', |
14 |
15 |
// generate input[type="hidden"]? |
16 |
hidden: false, |
17 |
18 |
// string or array to search through |
19 |
fields: '', |
20 |
21 |
// data format |
22 |
format: '', |
23 |
24 |
// input format |
25 |
inputFormat: '', |
26 |
27 |
// max number of results |
28 |
maxShow: 5, |
29 |
30 |
// clear the input when no option is selected |
31 |
isClear: true, |
32 |
33 |
// show selected options |
34 |
showSelected: true, |
35 |
36 |
// show dropdown button |
37 |
dropdownBtn: false, |
38 |
39 |
// max number of results in the dropdown |
40 |
dropdownMaxItem: 8, |
41 |
42 |
// multiple select |
43 |
multiple: false, |
44 |
45 |
// true = no limit |
46 |
maxItem: true, |
47 |
48 |
// show multiple skins |
49 |
showMultiSkin: true, |
50 |
51 |
// multiple styles |
52 |
multiStyle: {}, |
53 |
54 |
// multiple fields |
55 |
multiField: '', |
56 |
57 |
// show on focus |
58 |
focusShow: false, |
59 |
60 |
// text when no results |
61 |
noResult: '', |
62 |
63 |
// custom skin |
64 |
skin: '', |
65 |
66 |
// callbacks |
67 |
disableRule: function(data) { |
68 |
return false; |
69 |
}, |
70 |
success: function($input, data) { |
71 |
return true; |
72 |
}, |
73 |
afterDelete: function($input, data) { |
74 |
return true; |
75 |
} |
76 |
|
77 |
}); |
7. API methods.
01 |
// clear the input field |
02 |
$('#clear').trigger('clear'); |
03 |
04 |
// destroy the plugin |
05 |
$('#destroy').trigger('destroy'); |
06 |
07 |
// up<a href="https://www.jqueryscript.net/time-clock/">date</a> the args |
08 |
$('#update').trigger('update', args); |
09 |
10 |
// set selected item programmatically. |
11 |
$('#multi').trigger(
source : jquery.net
|
