accordion-search v1.0.1
Accordion Search
Accordion Search is a JS library for search text across different accordions.
Demo
Installation
1) NPM Use the package manager npm to install Accordion Search.
npm i accordion-search2) Files
Go to /dist and take what you want.
Recommendation take :
Usage
1) Creation of the html structure
<div id="my-accordion-search" class="as">
<div class="as-search-container">
<input class="as-search__input" type="text" value="" placeholder="Lorem ipsum dolor sit amet"/>
<span class="as-search__search_btn"></span>
<span class="as-search__clear_btn"></span>
</div>
<div class="as-search-result"></div>
<section class="as-accordion">
<h2 class="as-accordion__title"> ... </h2>
<div class="as-accordion__content">
...
</div>
</section>
<section class="as-accordion">
<h2 class="as-accordion__title"> ... </h2>
<div class="as-accordion__content">
...
</div>
</section>
</div>You can choose the tags you want for :
- .as
- .as-search__search_btn
- .as-search__clear_btn
- .as-search-result
- .as-accordion
- .as-accordion__title
- .as-accordion__content
There is an example in : /dist/index.html
2) JS initialization
- Default settings
const accordionSearch = new AccordionSearch( document.getElementById( 'my-accordion-search' ) )- Advanced settings
const accordionSearch = new AccordionSearch( document.getElementById( 'my-accordion-search' ), {
searchOnClick: true,
searchOnlyTitle: true,
caseSensitive: false,
btnOpenCloseAll: true,
itemsOpened:[1,5],
suggestionBox: true,
suggestionBoxTitle: 'Popular Searches:',
suggestionBoxKeywords: [ 'Title 1', 'Title 2', 'Title 3', '..'],
pagination: true,
paginationLimit: 3,
loader: true,
queryUrl: true,
queryUrlName: 'myQuery',
} )Availables configurations JS
{
searchOnlyTitle : false, // Feature "searchOnlyTitle" : Allow search only accordion title.
searchOnClick : false, // Feature "searchOnClick" : Allow search only on click icon search in input
caseSensitive : false, // Feature "caseSensitive"
itemsOpened : 0, // Feature "itemsOpened" : Int = number element to opened, [0,4,10] = position of elements to opened, "all" = all elements opened
suggestionBox : false, // Feature "suggestionBox" : display a suggestion box.
suggestionBoxTitle : 'Popular Searches:', // Feature "suggestionBox" : Title of suggestions box.
suggestionBoxKeywords : [], // Feature "suggestionBox" : Items of suggestions box, ex [ 'text1', 'text2' ], item.length > 2.
btnOpenCloseAll : false, // Feature "btnOpenCloseAll" : Display button open/close all.
pagination : false, // Feature "pagination" : pagination status
paginationLimit : 2, // Feature "pagination" : item per page
loader : false, // Feature "loader" : Add loader on search
queryUrl : false, // Feature "queryUrl" : Add GET on url to start search
queryUrlName : 'asQuery', // Feature "queryUrl" : custom GET
msgItemFound : 'Item Found !',
msgItemsFound : 'Items Found !',
msgNoResult : 'Nothing Found !',
iconSearch : '<i class="fas fa-search"></i>',
iconClear : '<i class="fas fa-times"></i>',
iconLoader : '<i class="fas fa-spinner fa-spin"></i>',
iconOpen : '<i class="fas fa-plus"></i>',
iconClose : '<i class="fas fa-minus"></i>',
iconOpenAll : '<i class="fas fa-plus"></i>',
iconCloseAll : '<i class="fas fa-minus"></i>',
}You can edit defaults settings by modifying the values of the variable
You can change icons if you don't use Font-Awesome solid
window.AccordionSearchConfigAvailables customization CSS
You can edit css like you want but you can directly custom color different elements by editing the colors of the css variables.
Default variables :
:root {
--search-input-background: transparent;
--search-input-text: #333333;
--search-input-placeholder: #757575;
--search-input-border: #cacaca;
--search-input-search-btn: #333333;
--search-input-clear-btn: #cc0000;
--search-suggestion-box-title: #333333;
--search-suggestion-box-item-background: #f4f4f4;
--search-suggestion-box-item-text: #333333;
--search-suggestion-box-item-hover-background: #dbdbdb;
--search-suggestion-box-item-hover-text: #333333;
--search-result-background: #f4f4f4;
--search-result-text: #333333;
--accordion-title-background: #f4f4f4;
--accordion-title-text: #333333;
--accordion-title-hover-background: #dbdbdb;
--accordion-title--hover-text: #333333;
--accordion-content-background: transparent;
--accordion-content-text: inherit;
--accordion-content-background-found: #333333;
--accordion-content-text-found: #f4f4f4;
--accordion-btn-all-background: #f4f4f4;
--accordion-btn-all-text: #333333;
--accordion-btn-all-hover-background: #dbdbdb;
--accordion-btn-all-hover-text: #333333;
--accordion-btn-pagination-background: #f4f4f4;
--accordion-btn-pagination-text: #333333;
--accordion-btn-pagination-hover-background: #dbdbdb;
--accordion-btn-pagination-hover-text: #333333;
--accordion-btn-pagination-active-background: #dbdbdb;
--accordion-btn-pagination-active-text: #333333;
}Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate. Please create all format files (dev/build)
1) Availables Scripts:
npm run dev-js => Launch Webpack in development mode (without optimization and minification) with '- watch' create the accordion-search.js file in /dist
npm run build-js => Launch Webpack in production mode (with optimization and minification) and create the accordion-search.min.js file in /dist
npm run dev-css => Launch Sass with '- watch' and create the accordion-search.css file and the accordion-search.css.map file in /dist
npm run build-css => Launch Sass ( with compressed and no source map ) and create the accordion-search.min.css file in /dist + Launch postcss with replace and autoprefixer
External libraries used
- Mark.js
- Font Awesome (solid version)