score:0

//onKeyUp function
    const searchedWordsHighlight = (event) => {
        var searchedPara = document.querySelectorAll('.searchCell-body');
        var words = event.target.value;
        var regex = RegExp(words, 'gi') // case insensitive
        var replacement = '<b>' + words + '</b>';
        for (let i = 0; i < searchedPara.length; i++) {
            const element = searchedPara[i].innerText;
            if (words != "") {
                let newHTML = element.replace(regex, replacement)
                searchedPara[i].innerHTML = newHTML;
            } else {
                let newHTML = element.replace()
                searchedPara[i].innerHTML = newHTML;
            }
        }
    }
    
//Input field
    <Input
        label = "Search"
        onChange = { handleSearch }
        onKeyUp={searchedWordsHighlight}
    />
//Table
    <TableRow key={record.id}>
        <TableCell className="searchCell-body" size='small'>{record.fullName}</TableCell>
        <TableCell className="searchCell-body" size='small'>{record.email}</TableCell>
        <TableCell className="searchCell-body" size='small'>{record.mobileNumber}</TableCell>
        <TableCell size='small'>{record.selectBoxTitle}</TableCell>
    </TableRow>

score:2

import getParts from 'ec-highlighter-core'
...

const handleSearch = e => {
  let target = e.target
  const searchFields = ['fullName', 'email', 'mobileNumber']
  setFilterFn({
    fn: items => {
      let filteredItems
      // Get filtered items
      if (target.value === '') filteredItems = items
      else
        filteredItems = items.filter(item => {
          return searchFields.some(field =>
            item[field].toLowerCase().includes(target.value.toLowerCase())
          )
        })
      // Get the arrays for highlighting
      return filteredItems.map(item => {
        const out = item
        searchFields.forEach(field => {
          out[field] = getParts(item[field], target.value)
        })
        return out
      })
    }
  })
}

<Input
    label = "Search"
    onChange = { handleSearch }
/>


Related Query

More Query from same tag