У меня есть множество устройств, каждое устройство имеет свой уникальный идентификатор, я хочу сделать searchBox, который будет фильтровать по этому идентификатору. До сих пор мне это удавалось частично, поэтому он проверяет, соответствует ли символ из ввода символу из идентификатора устройства. Однако не так, как я хотел бы, пример ниже:
id =35678; input.value = 5
это не должно работать, так как первый символ 3
id = 35679; input.value= 35
это должно работать, так как первый символ такой же
Проблема в функции сопоставления/включения, но я не знаю, как ее заменить, чтобы она работала.
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"
}
})
})
Вместо использования .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, которые являются тяжелыми в вычислительном отношении.
Обратите внимание, что каждый идентификатор в массиве должен быть строкой.
const ids = ['3575', '5555']
const found = value => ids.filter(i => i.indexOf(value, 0) === 0)
console.info(found(5));
console.info(found(35));
Я чувствовал, что это что-то простое, но не мог понять, он отлично работает! Спасибо:)