Search inside an array and return multiple results-CodePudding

I have made this simple search snippet. I made it to search throughout my array(elements array) and if the input value is exactly equal to one of the element's names and that element will return.

So here if we search 'apple' in the input field the below result will return

{ color: "red", name: "apple" }

My question is: Without returning according to the exact value of the input, can we return a value like the input value. For example, instead of typing 'apple' word when we type the starting letters of the 'apple' word like 'ap' I'm expecting to return apple object and apex object which includes 'ap' (I want to return all the objects which contain the name like 'ap' from the array) like a normal search function does. Thank you if somebody likes to help me.Below is my code.

//array
const elements = [{name: 'apple',color: 'red'},{name: 'apex', color: 'white'},{name: 'bat', color: 'black'}];

//find function
const searchElement = (elementsArray,keyword) => {
   const returnedElement = elementsArray.find((element,index) => {
      return element.name.toLowerCase() === keyword.toLowerCase();
   });
   
   return returnedElement;
}

//keyup event
document.getElementById('myInput').addEventListener('keyup', () => {
  const keyword = document.getElementById('myInput').value;
  const result = searchElement(elements,keyword);
  console.log(result);
});

<input type="text" placeholder="Search" id="myInput">

CodePudding user response：

I think this is what you want. Use filter instead of it.

//array
const elements = [
    { name: "apple", color: "red" },
    { name: "apex", color: "white" },
    { name: "bat", color: "black" }
];

//find function
const searchElement = (elementsArray, keyword) => {
    const returnedElement = elementsArray.filter((element, index) => {
        return element.name.toLowerCase().includes(keyword.toLowerCase());
    });

    return returnedElement;
};

//keyup event
document.getElementById("myInput").addEventListener("input", () => {
    const keyword = document.getElementById("myInput").value;
    const result = searchElement(elements, keyword);
    result.forEach((item) => console.log(item.name));
});

<input type="text" placeholder="Search" id="myInput">

CodePudding user response：

You could use a RegExp expression:

const searchElement = (elementsArray, keyword) => {
    const returnedElement = elementsArray.find((element) => {
        return element.name.toLowerCase().match(new RegExp('.*'   keyword.toLowerCase()   '.*','i')) !== null;
    });
    return returnedElement;
}

If you use the RegExp expression RegExp('.*' keyword.toLowerCase() '.*', 'i'), pp will match 'apple'. If you use RegExp('^' keyword.toLowerCase() '.*', 'i') pp will not match apple but app will.

CodePudding user response：

You can do:

const elements = [{name: 'apple',color: 'red'},{name: 'apex', color: 'white'},{name: 'bat', color: 'black'}]
const myInput = document.getElementById('myInput')

myInput.addEventListener('keyup', () => {
  const keyword = myInput.value.replace(/[.* ?^${}()|[\]\\]/g, '\\$&')
  const filterFn = ({ name }) => name.match(new RegExp(keyword, 'i'))
  const result = elements.filter(filterFn)
  
  console.clear()
  console.log(result)
})

<input type="text" placeholder="Search" id="myInput">

CodePudding user response：

Use the "input" EventName (instead of "keyup") - since an input value can change not only on some key event, but also when copy/pasting values into it, etc. The "input" event will handle all those cases.
Inside the handler function, don't query again the DOM for your input element, simply use the Event.currentTarget like: evt.currentTarget.value
Create a reusable function namely filter() that accepts four arguments: the Array to search, the Property name (key) to lookup, the String to search for, and an optional Object of options for case sensitive and match criteria (any position, full match, start or end of string)
Use RegExp.prototype.test() inside of your Array.prototype.filter()

/**
 * @param {string} str String to escape
 * @returns {string} String with escaped regex special characters
 */
const regEscape = (str) => str.replace(/[.* ?^${}()|[\]\\]/g, "\\$&");

/**
 * @param {array} arr Array (of objects) to filter
 * @param {string} key Property name
 * @param {string} val Value to match
 * @param {object} opt Options for case sensitive and match criteria
 * @returns {array} Filtered array of objects
 */
const filter = (arr, prop, val, opt = {sensitive: false, match: "any"}) => {
  val = regEscape(val);
  const criteria = {
    any: val,
    start: `(?<=^| )${val}`,
    end: `${val}(?=$| )`,
    full: `(?<=^| )${val}(?=$| )`,
  }[opt.match];
  const reg = new RegExp(criteria, opt.sensitive ? "g" : "ig");
  return arr.filter(ob => reg.test(ob[prop]));
};


// Task: Search objects by "name" property

// Data:
const data = [
  {name: "apple", color: "red"},
  {name: "apexx", color: "white"},
  {name: "batle", color: "black"},
];

// Search input handler:
document.querySelector("#myInput").addEventListener("input", (evt) => {
  const results = filter(data, "name", evt.currentTarget.value, { match: "start" });
  console.clear()
  console.log(results)
});

<input id="myInput" type="text" placeholder="Search">

as you can see above the option { match: "start" } is used - which will make sure that the match should start at the beginning of string.
If you want to search from "any" position, use { match: "any" } or remove the options, since "any" is by default.
To search case-sensitive use: { match: "start", sensitive: true }

PS: Some of the used logic is taken from: Hilite

CodePudding user response：

Based on your question, I think my solution can help you

const elements = [{name: 'apple',color: 'red'},{name: 'apex', color: 'white'},{name: 'bat', color: 'black'}];

//find function
const searchElement = (elementsArray,keyword) => {
   var result = [];
   
   elementsArray.forEach((element,index) => {
      if (element.name.toLowerCase().includes(keyword.toLowerCase())) {
            result.push(element);
      }
   });
   
   return result;
}

//keyup event
document.getElementById('myInput').addEventListener('keyup', () => {
  const keyword = document.getElementById('myInput').value;
  const result = searchElement(elements,keyword);
  console.log(result);
});