Matching search Text become small like google suggestions in Js

Md. Khalid Hossen - Nov 21 '22 - - Dev Community

Making pain Text match data normal text and others become bold

 let term = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,';
      let search1 = 'Lorem';
      let parts = term.split(search);
      console.log("parts", parts)
      return parts.map((item, i) => (
        <>{item && <strong>{item}</strong>}{(i !== parts.length - 1) ? search1 : null}</>
      ))
Enter fullscreen mode Exit fullscreen mode

*Array of Array match Make suggest text bold matching with search text *

let termData = [
       { "title": "apple orange banana" },
       { "title": "upload app koro na kn???" },
        { "title": "range ban apple ana" },
        { "title": "Hello world" },
        { "title": "Hello no world" },
    ];
    let search = 'app';
    const matchData = termData?.filter((product) => product.title.toLowerCase().includes(search.toLowerCase()));

    let newArray = [];

    matchData.map(item => {
        return newArray.push(item.title.split(search))
    })

    return newArray.map((item, index) => (
        <>
            {item.map((second, i) => (
                <span onClick={() => alert(`"hey MR.", ${index}`)}>{second && <strong>{second}</strong>}{(i !== item.length - 1) ? search : null}</span>
            ))}
            <br />
        </>
    ))
Enter fullscreen mode Exit fullscreen mode
. . . . .