Skip to content

Repository files navigation

javascript-search-input

Search for terms in objects and nested objects

Install

yarn add javascript-search-input

Usage

import{createFilter}from'javascript-search-input';constsampleData=[{id: 1,user: {name: 'Junior Oliveira',job: 'Software Engineer',},subject: 'Hi!',dest: [{name: 'Bruno',job: 'Developer',},{name: 'Helio',job: 'Lawyer',}]},{id: 2,user: {name: 'Fabiano',job: 'UX Designer',},subject: 'javascript',dest: [{name: 'Cordeiro',job: 'CEO',},]}];constKEYS_TO_FILTERS=['user.name','subject','dest.name'];constmyFilter=createFilter(KEYS_TO_FILTERS)constfiltered=sampleData.filter(myFilter('Oliveira'));// should return the object { ... user: { name: 'Junior Oliveira'} ... }

The library is framework agnostic, but if you wanna use with React, for example:

constuseFilter=({ keys, data })=>{const[inputText,setInputText]=useState('');constmyFilter=createFilter(keys);constfiltered=data.filter(myFilter(inputText));return{ inputText, setInputText, filtered };};constApp=()=>{const{ inputText, setInputText, filtered }=useFilter({keys: ['user.name','subject','dest.name'],data: sampleData,});return(<divclassName="App"><inputtype="text"value={inputText}onChange={event=>setInputText(event.target.value)}/>{JSON.stringify(filtered)}</div>);};

About

Search for terms in objects and nested objects

Resources

Stars

3 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages