Фильтр/поиск в таблице с использованием частичного совпадения — HTML и Javascript
У меня есть таблица HTML, которую я пытаюсь отфильтровать с помощью нечеткого поиска и частичных совпадений. Я пробовал много библиотек JS, но они, похоже, не предлагают оба этих варианта фильтра вместе. Я пробовал FuzySort.js, FlexSearch.js и другие. Кто-нибудь знает библиотеку, которая может это сделать?
Основа:
- MySQL хранит данные.
- Внешний интерфейс отображает таблицу.
- У администраторов есть отдельный интерфейс, который позволяет им добавлять/удалять/редактировать данные в MySQL.
- JavaScript для фильтрации/сортировки/поиска в клиентской части таблицы на внешнем интерфейсе.
Требования:
- Полнотекстовый поиск
- Нечеткий поиск
- Частичные совпадения.
Ожидаемые результаты: Если...
- Строка таблицы № 1 имеет имя «Имя1».
- Строка таблицы № 2 имеет имя «Имя2».
- Строка таблицы № 3 имеет имя «Имя3».
- И в строке поиска вы вводите «Имя1 Имя3», он должен отображать строки 1 и 3.
Текущие результаты:
- в строке поиска, когда вы вводите «Имя1 Имя3», он не отображает результатов.
Текущий код
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
Вот мой JSFiddle: https://jsfiddle.net/h7p8bzs0/
Любая помощь или направление приветствуется. Есть ли у кого-нибудь какие-либо предложения о том, какая библиотека может достичь этих результатов, или как я могу настроить приведенный выше код JS, чтобы сделать это?
Ps: извините, я новичок и перегружен вариантами использования JSON, Node.JS, реальных баз данных и т. д.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
вы можете попробовать следующий Javascript:
function myFunction() {
const input = document.getElementById("myInput");
const filters = input.value.toUpperCase().split(' '); // create several filters separated by space
const table = document.getElementById("myTable");
const tr = table.getElementsByTagName("tr");
for (let i = 0; i < tr.length; i++) {
const td = tr[i].getElementsByTagName("td")[1];
if (td) {
const txtValue = td.textContent || td.innerText;
tr[i].style.display = "none"; // hide each row
for (filter of filters) { // add the rows matching a filter
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
}
}
}
}
}
Здесь происходит то, что мы создаем более одной строки фильтра для сопоставления, разделенных пробелом. Мы скрываем каждую строку, как только у нас есть хотя бы один фильтр, и добавляем ее снова, если она соответствует хотя бы одному из фильтров.
О, и я немного изменил структуру ваших переменных: нам не нужны деклараторы заранее, и мы хотим, чтобы они были как let или const, чтобы они не были глобальными.
Не уверен, что правильно понимаю, что вы хотите сказать. Фильтр, как я уже писал, уже игнорирует фильтры, которые не совпадают, поэтому в вашем примере «Имя1 Имя2 Собака» отображаются строки для имени1 и имени2, а собака ничего не делает.
Вау, это потрясающе, спасибо, что нашли время, чтобы внести эти изменения. Я понятия не имел, что JS без библиотеки может так легко добиться этого. Есть ли способ также игнорировать ключевые слова, которые не найдены в поиске? Например, если бы я искал «Имя1 Имя2 Собака», смог бы он исключить/игнорировать «Собаку» из поиска фильтра, поскольку он не найден в таблице? Если filter1 != tr используйте filter2. Если filter2 != tr использовать фильтр 3.