Creates a basic search bar for one HTML page that filters the possible results according to their keywords.
First of all, look at the src folder and import the source code (SearchModule.js):
<scriptsrc="SearchModule.js">The SearchModule needs to be instantiated like this:
varsearchModule=newSearchModule({items: ".item",// we are searching among .itemdefaultDisplay: "flex",// the results that don't correspond disppear (display:none), so in order to make them reappear...oninput: function(value,results){// every time that the user writes in the input, we get the value and a bool "results"varsearch_sentence=document.querySelector("#js-search-sentence");if(value.length>0){if(results===false){search_sentence.innerHTML='No result for "'+value+'". Try another more general keyword.';}else{search_sentence.innerHTML='Here are the articles about "'+value+'" :';}}else{search_sentence.innerHTML="";}},});Here a table recapitulating the possible parameters to pass to SearchModule:
| Name | Default | Type | Description |
|---|---|---|---|
| items | required | string | The query selector of the items to filter (needs to be a class) |
| defaultDisplay | "block" | string | When an element doesn't correspond to what the user wrote, the element disppear (display:none). We need to make it reappear if the user changes something. |
| oninput | null | function(v:string, results:bool) | This function is called every time that the user writes in the input. Thanks to results, you can know if there are no more results (false). Take a look at the example. |
Don't forget to add oninput attribute to the input:
<inputtype="search"
oninput="searchModule.search(this)"
class="searchbar"
maxlength="20"
autocapitalize="off"
autocomplete="off"
placeholder="Search with a keyword..."
/>If we keep the above example, we search among the elements that have the class "item". In order for the search bar to work properly, you absolutely need to add a specific attribute to each HTML element that has this class. This attribute is: data-keywords. In this attribute you can write the list of keywords that correspond to each item. Note that capital letters and white spaces are not taken into account (input.value.trim().toLowerCase()).
If an element doesn't have the attribute, an error will be thrown in the console (via console.error()). Therefore, this element will always be displayed whereas it does'nt correspond to what the user is looking at.
For example, we have a list of fruits:
<divclass="list-items"><divclass="item" data-keywords="Banana">Banana</div><divclass="item" data-keywords="Strawberry, framboise">Strawberry</div><divclass="item" data-keywords="Raspberry">Raspberry</div><divclass="item" data-keywords="Cherry">Cherry</div><divclass="item" data-keywords="Orange">Orange</div><divclass="item" data-keywords="Apple">Apple</div></div>Therefore, if the user writes "apple", only the last item will be displayed. However, if the user writes "framboise" or "strawberry", then the second element will be displayed.
For a concrete example, I invite you to look at the example provided in the src folder.
MIT License.