How to search for string in any order

I have a .js file with an array of strings inside. Let’s say one of my arrays has the string “The quick brown fox jumps over the lazy dog”. I can search “The quick brown fox” and it will display the string in my array which has that value. But if I were to search “The quick fox jumps lazy dog”, it will not display the line. My search needs to be in the same order as the string appears in the array or it will not work. How can I search in my array in such a way that it will display matching entries instead of exact entries?

Here is my code:

//App.js
import { useState } from "react";
import { Data } from "./data";
import "./App.css";
import Table from "./Table";

 function App() {
   const [query, setQuery] = useState("");
   const keys = [""];

   const search = (data) => {
     return data.filter((item) =>
       keys.some((key) => item.toLowerCase().includes(query))
     );
   };

 return (
   <div className="app">
     <h1>Search Something</h1>
     {/* <Home /> */}
     
     <div className="searchBoxes">
       <input
         className="search"
         placeholder="Search Array..."
         onChange={(e) => setQuery(e.target.value.toLowerCase())}
       />
       </div>

     {<Table data={search(Data)} />}
   </div>
 );
 }

 export default App;

//data.js
export const Data = ["The quick brown fox jumps over the lazy dog", "Lorem ipsum dolor sit amet", "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC"]

//Table.jsx
const Table = ({ data }) => {
    return (
      <table>
        <tbody>
          {data.map((item, index) => (
            <tr key={index}>
              <td>{item}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  };
  
  export default Table;

I tried using different array functions like .map() but did not get the desired result.

Answer

You are using the wrong order of how to search within the data array.

const search = (data) => {
    queryWords = query.split(' ').filter(queryWord => queryWord.length > 0)
    return data.filter(dataEntry => queryWords.every(queryWord => dataEntry.toLowerCase().split(' ').includes(queryWord) || dataEntry.toLowerCase().includes(queryWord)))
   };

queryWords contain every word in the search query, e.g. if you were searching for the brown dog, then:

query='the brown dog'

Now you split by ' ', which gives you the array

queryWords = ['the', 'brown', 'dog']

You need to filter this so it doesn’t contain any empty strings. This is where filter(queryWord => queryWord.length > 0) comes into play.

What you need to do know is filter each dataEntry of your data array: You are looking for entries that contain every word from your search query OR the whole sentence (notice the || operator and dataEntry.toLowerCase().includes(queryWord) is basically like your initial idea.