Search inside an array and return multiple results

Question

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">

You'll first have to define what you mean by "name like 'app'". According to your example, it's not just a partial match. — Robby Cornelissen
– Robby Cornelissen, Commented Jun 15, 2022 at 7:35
You're looking for "fuzzy search", for which there are loads of libraries out there. I don't think it's something that can properly be answered here, in a way that's on-topic for Stack Overflow, though. — Cerbrus
– Cerbrus, Commented Jun 15, 2022 at 7:35
But it does start with ap, which, again, is something "Fuzzy search" libraries can match. — Cerbrus
– Cerbrus, Commented Jun 15, 2022 at 7:39

truong nguyen xuan · Accepted Answer · 2022-06-15 09:31:37Z

1

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);
});

answered Jun 15, 2022 at 9:31

truong nguyen xuan

111 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nelson Lai · Accepted Answer · 2022-06-15 08:01:56Z

0

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">

edited Jun 15, 2022 at 8:01

answered Jun 15, 2022 at 7:41

Nelson Lai

1951 silver badge7 bronze badges

5 Comments

Roko C. Buljan Over a year ago

Use the "input" event instead of "keyup". Copy/paste... remember?

Robby Cornelissen Over a year ago

Probably startsWith() is what OP is looking for instead of includes().

Roko C. Buljan Over a year ago

Use evt.currentTarget.value instead of querying again the DOM

Robby Cornelissen Over a year ago

And no need to include index in the callback since you're not using it anyway. And probably should just immediately destructure element to {name}.

Roko C. Buljan Over a year ago

@BelugaB69 this seems not what you were looking for, since it uses .includes instead of .startsWith() - which was your question requirement (after the edit) - but yeah, it's an easy fix

Yoz · Accepted Answer · 2022-06-15 08:08:29Z

0

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.

answered Jun 15, 2022 at 8:08

Yoz

312 bronze badges

Comments

Yosvel Quintero · Accepted Answer · 2022-06-15 08:27:15Z

0

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">

edited Jun 15, 2022 at 8:27

answered Jun 15, 2022 at 7:44

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

1 Comment

Robby Cornelissen Over a year ago

All fun and games until someone puts a dot (.) in the input field. Now you got everything matching. Or a backslash (`\`). Now you got an error. Or another character with special meaning in regular expression... "Some people, when confronted with a problem, think "I know, I'll use regular expressions." Now they have two problems."

Roko C. Buljan · Accepted Answer · 2022-06-15 09:25:43Z

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

Collectives™ on Stack Overflow

Search inside an array and return multiple results

5 Answers 5

Comments

5 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related