Autosearchbox NPM

#Install

code

npm install autosearchbox

#Features

Integrated with Jquery tag-it, jquery, jquery-ui
Easy to custom options
Backspace on empty input deletes previous tag
Ability to provide slider when tag full input
Ability to provide 2 levels categories
Ability to provide scroll on item
Customizable about free text when searching
Customizable validate for searching
Easy change data request with function refreshSuggestion

#HTML Structure

<div class="form-search">
<div class="wrap-search">
	<ul class="search_tags">
	</ul>
</div>
<ul class="tagit-autocomplete-search">
</ul>

#Options

slider: true, //custom slider enable,disable
searchBtn: true, //custom search button
freeTextSearch: true, //if true then create any tag when typing, false just create tag on list available from source
wrapTags: '.wrap-search', //class wrap search tag in html
mainClass: 'form-search', //class wrap of all element html will using to use autosearchbox Widget
tagitClass: '.search_tags', //class will using for create tagit plugin
autoCompleteClass: '.tagit-autocomplete-search', //html where to show data autocomplete when typing
liCategoryClass: 'category-name', //class of category
childCategoryClass: 'category-child', //class of child of parent category above
regexValidation: /a-zA-Z0-9_\s+/, //regex validation when typing structure /value+/
source: null, //source data to show when typing
delayRefreshData: 1000, //time delay to refresh new Data //Callbacks function
keyEventListener: null, //event listener when user create tag by typing
selectEventListener: null // event listener when user create tag by click

#Using

code

$('.form-search').autosearchbox({options});

var data = [
  { label: 'jayeson_test', category: 'Members' },
  { label: 'phan_test1', category: 'Members'},
  { label: 'bet_test1', category: 'Members' },
  { label: 'agent_portal', category: 'Admin' },
  { label: 'admin_portal', category: 'Admin' },
  { label: 'wyvern', category: 'Admin' },
  { label: 'phan_test', category: 'Users' },
  { label: 'long_test', category: 'Users' },
  { label: 'quang_test', category: 'Admin_portal' }
];

Using source

	code

		var searchbox = $('.form-search').autosearchbox({

			slider: true,
			searchBtn: false,
			freeTextSearch: false,
			source: data,
			delayRefreshData: 1000 // change data will apply after 1second
		});