autosearchbox

1.0.6 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i autosearchbox

Weekly Downloads

0

Version

1.0.6

License

ISC

Last publish

Collaborators

  • tuan_tran