autosearchbox

#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
    });
  

• Have new data request like this

code

var data_new = [
  { label: 'jayeson_test', category: 'New' },
  { label: 'phan_test1', category: 'New'},
  { label: 'bet_test1', category: 'New' },
  { 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 new data function

code

searchbox.autosearchbox('refreshSuggestion', data_new);