Question

I have an array with some values. How can I search that array using jquery for a value which is matched or close to it?

var a = ["foo","fool","cool","god"];

If I want to search for oo, then it should return foo, fool, and cool because these strings contain oo.

Answer 1

Vanilla JS

To search in the array with Vanilla JS I would use the filter() method implemented into the Array prototype.

Note: For very large arrays you might want to consider refactoring those to async/await functions else it might slow down the user interface.

1. Using regular expressions (slower)

This is the most flexible approach as you could search for different patterns. You should be aware that the search term here is not a plain text, thus you have to escape most of non-alphanumeric chars according to the syntax. You should not pass unprocessed user input directly to the function, as it will not work as expected.

let a = ["foo","fool","cool","god"];
var term = 'oo'; // search term (regex pattern)
var search = new RegExp(term , 'i'); // prepare a regex object
let b = a.filter(item => search.test(item));
console.log(b); // ["foo","fool","cool"]

2. Using indexOf (faster)

In this particular case I would rather use indexOf() which is basically an equivalent of LIKE %term% but much faster than using regular expressions when working with large arrays.

It is a common case to do case-insensitive searches so make sure to use toLowerCase() for both the search terms and the array items. Otherwise remove it everywhere from the examples.

let a = ["foo","fool","cool","god"];
let term = 'oo';
let b = a.filter(item => item.toLowerCase().indexOf(term) > -1);
console.log(b); // ["foo","fool","cool"]

ES6 style (ES2015)

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

const filterItems = (needle, heystack) => {
  let query = needle.toLowerCase();
  return heystack.filter(item => item.toLowerCase().indexOf(query) >= 0);
}

console.log(filterItems('ap', fruits)); // ['apple', 'grapes']
console.log(filterItems('ang', fruits)); // ['mango', 'orange']

ES5 style

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

function filterItems(needle, heystack) {
  var query = needle.toLowerCase();
  return heystack.filter(function(item) {
      return item.toLowerCase().indexOf(query) >= 0;
  })
}

console.log(filterItems('ap', fruits)); // ['apple', 'grapes']
console.log(filterItems('ang', fruits)); // ['mango', 'orange']

---

This is the outdated answer

To search in the array with jQuery you might use jQuery.grep() or
jQuery.map(). Both return new array with filtered elements using a
callback function.

The fastest implementation (case insensitive) is using indexOf and
toUpperCase in the callback:

var search_term = 'oo'; // your search term as string
var search = search_term.toUpperCase();
var array = jQuery.grep(a, function(value) {
    return value.toUpperCase().indexOf(search) >= 0;
});

If you don’t need case insensitive search you can remove both .toUpperCase() to speed it up even further.

More flexible but much slower (good enough for small arrays) is to use
regular expression:

var search_term = "oo"; // search term
var search = new RegExp(search_term , "i");
var arr = jQuery.grep(a, function (value) {
    return search.test(value);
});

or

var search_term = "oo"; // search term
var search = new RegExp(search_term , "i");
var arr = jQuery.map(a, function (value) {
    return value.match(search) ? value : null;
});

Regular expressions allow you to make searches much more complex than %value%. However don’t use it if you don’t need it because it is
many times slower.

you should get an array arr with the matched elements