чистый javascipt, поле фильтра не фильтрует должным образом

Question

У меня есть массив устройств, каждое устройство имеет свой уникальный идентификатор, я хочу сделать searchBox, который будет фильтровать по этому идентификатору. Пока что мне это удалось частично, поэтому он проверяет, совпадает ли символ входного символа с идентификатором устройства. Однако не так, как хотелось бы, пример ниже:

id = 35678; input.value = 5

не должно работать, так как первый символ - 3

id = 35679; input.value = 35

должно работать, так как первый символ такой же

Проблема в функции match / include, но на самом деле не знаю, как заменить ее, чтобы она заработала

input_box.addEventListener('keyup', function(){
  var search_result = this.value;
  var device = document.querySelectorAll('[device_id]')
  var array_of_devices = [];
  for (var i = 0; i < device.length; i++) {
       array_of_devices.push(device[i].getAttribute('device_id'))
  }
  array_of_devices.forEach(el => {
         if (!el.match(search_result)) {
           var not_matched = document.querySelector(`[device_id="${el}"]`)
           not_matched.style.display = "none"    
         } else {
          var matched = document.querySelector(`[device_id="${el}"]`)
          matched.style.display = "block"    
        }
     })
 })

Answer 1

Вы можете использовать начинается с вместо совпадения

let arr = ['35678', '451234', '45454', '56565']

let find = (value) =>{
  return arr.filter(id=> id.startsWith(value))
}

console.log(find(5))
console.log(find(35))
console.log(find(46))

Answer 2

Вместо использования .match вы можете просто использовать .indexOf и проверить индекс, если он равен 0, тогда введенная строка соответствует имени устройства с самого начала.

array_of_devices.forEach(el => {
  // Condition below is changed to use indexOf
  if (el.indexOf(search_result) === 0) {
    var not_matched = document.querySelector(`[device_id="${el}"]`)
    not_matched.style.display = "none"
  } else {
    var matched = document.querySelector(`[device_id="${el}"]`)
    matched.style.display = "block"
  }
});

Я бы предложил вамсоздать строку элементов устройства на основе строки поиска и добавить ее в свой DOM вместо изменения свойств экрана.Это будет стоить вам кучу операций DOM, что требует больших вычислительных ресурсов.

Answer 3

Обратите внимание, что каждый идентификатор в массиве должен быть строкой

const ids = ['3575', '5555']
const found = value => ids.filter(i => i.indexOf(value, 0) === 0)
console.log(found(5));
console.log(found(35));