How to create onkey up search in array using JavaScript?

Question

I want to create keyup search in Array which contains Names using JavaScript. My arrray is like,

[
 {
  "first_name": "abc",
  "account_id": 1
 },
 {
  "first_name": "Test",
  "account_id": 2
 },
 {
  "first_name": "Hasad",
  "account_id": 3
 }
]

When user add text to text box like,

User input: a

Output: abc, Hasad

This should be work like search using sql query in database. Please help me with this.

So you just want your array that you already have, to be filtered? — Lazar Nikolic, Sep 06 '19 at 10:38
do you like to look in only one property, or in all, like here: https://stackoverflow.com/q/44312924/1447675 — Nina Scholz, Sep 06 '19 at 10:40
I'm trying to filter with every index of the input box @MattEllen — Kunal Dholiya, Sep 06 '19 at 10:40

score 1 · Answer 1 · answered Sep 06 '19 at 10:42

You could .filter() your arary to only include results where first_name includes the search letter, and then .map() your array:

const arr = [
 {
  "first_name": "abc",
  "account_id": 1
 },
 {
  "first_name": "Test",
  "account_id": 2
 },
 {
  "first_name": "Hasad",
  "account_id": 3
 }
];

const search = 'a';
const res = arr.filter(({first_name}) => first_name.includes(search)).map(({first_name}) => first_name);

console.log(res);

However, this approach isn't very efficient as you need to loop each object, and then every first_name for each search. If you're looking for something efficient, you could use a prefix-trie to help you with this.

Krzysztof Krzeszewski · Accepted Answer · 2019-09-06T10:50:08.613

1

You could use a simple filter function

const data = [
 {
  "first_name": "abc",
  "account_id": 1
 },
 {
  "first_name": "Test",
  "account_id": 2
 },
 {
  "first_name": "Hasad",
  "account_id": 3
 }
];

function search(input){
  const filtered = data.filter(element => {
     for (const value of Object.values(element)) {
       if (value.toString().toLowerCase().includes(input.value.toLowerCase())) return true;
     }
  })
  document.getElementById("result").innerText=JSON.stringify(filtered)
}

<input onkeyup="search(this)">
<div id="result">[{"first_name":"abc","account_id":1},{"first_name":"Test","account_id":2},{"first_name":"Hasad","account_id":3}]</div>

please take a note of the fact that my function searched all fields of the objects, for the required value and returns list of objects meeting the criteria for you to use in any way required.

Also if the amount of data you are searching is significantly larger you may consider using debounce function to trigger it only ever so often (ex. after user stops typing for a second)

edited Sep 06 '19 at 10:50

answered Sep 06 '19 at 10:42

Krzysztof Krzeszewski

5,912
2
17
30

what do you mean by "add test" – Krzysztof Krzeszewski Sep 06 '19 at 10:44
put test in search box – Kunal Dholiya Sep 06 '19 at 10:44
my search is case sensitive, if you put "Test" it is working – Krzysztof Krzeszewski Sep 06 '19 at 10:45
@KunalDholiya I've added `.toLowerCase()` to the function above to make it case insensitive – Krzysztof Krzeszewski Sep 06 '19 at 10:47

score 1 · Answer 3 · answered Sep 06 '19 at 10:45

You could filter an map by taking a lower case strings.

var data = [{ first_name: "abc", account_id: 1 }, { first_name: "Test", account_id: 2 }, { first_name: "Hasad", account_id: 3 }],
    key = 'first_name',
    value = 'a',
    result = data
      .filter(o => o[key].toLowerCase().includes(value.toLowerCase()))
      .map(o => o[key]);

console.log(result);

score 1 · Answer 4 · answered Sep 06 '19 at 10:46

function searchFunction() {
  const arrayValue = [{
      "first_name": "abc",
      "account_id": 1
    },
    {
      "first_name": "Test",
      "account_id": 2
    },
    {
      "first_name": "Hasad",
      "account_id": 3
    }
  ];

  const searchValue = document.getElementById('txtsearch').value;
  const response = arrayValue.filter(({
    first_name
  }) => first_name.includes(searchValue)).map(({
    first_name
  }) => first_name);

  console.log(response);
  document.getElementById('showResponse').innerHTML = response
}

<input type='text' id='txtsearch' name='txtsearch' onkeyup="searchFunction()" />
<div id='showResponse'></div>

How to create onkey up search in array using JavaScript?

4 Answers4