Я пытаюсь создать поисковую систему в реальном времени без AJAX, где я могу выбрать из группы поисковых фильтров нужные параметры и быстро получить то, что мне нужно. Я думал о том, чтобы не использовать AJAX, чтобы не делать так много запросов к серверу. Вместо этого я извлекаю все записи из базы данных с помощью PHP и помещаю их в контейнер на странице поиска (при загрузке этой страницы), а затем с помощью плагина Mixitup я фильтрую то, что ищу, чтобы поиск был быстрее.
Мои фильтры: типы услуг, категории и местоположения, и у меня также есть вход, где я также могу вставлять слова для поиска. Каждый вид услуг имеет свои категории и местоположения. Если я делаю простой поиск, например: запросить, чтобы он показывал все сервисы A или B, это хорошо. Но если я выполняю пользовательский поиск, выбирая несколько фильтров, у меня возникают проблемы.
Проблема, с которой я сталкиваюсь, заключается в следующем: если я выбираю, например, Сервис A, плагин приносит мне все сервисные записи A, это хорошо, но если я также выберу категорию A, я надеюсь получить все услуги A с категорией A, но этого не происходит, вместо этого плагин приносит мне все записи с категорией A (включая службы A, B, C, D et c et c.) Без учета того, что ранее была выбрана Служба А.
Это пример кода, который я использую для тестирования перед его реализацией в моем проекте:
$(document).ready(function() {
var containerEl = $("#container_items");
var selectFilterServ = $('#select_services_box');
var selectFilterLoc = $('#select_location_box');
var inputSearch = $("#searching_text_item"); var keyupTimeout;
var checkboxGroup = document.getElementById('checkbox-catg-group');
var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
var mixer = mixitup(containerEl, {
animation: {
duration: 350
},
callbacks: {
onMixClick: function() {
// Reset the search if a filter is clicked
if (this.matches('[data-filter]')) { inputSearch.val() = '';
}
}
}
});
selectFilterServ.change(function(){
var selector = selectFilterServ.val();
mixer.filter(selector);
});
selectFilterLoc.change(function(){
var selectorLoc = selectFilterLoc.val();
mixer.filter(selectorLoc);
});
inputSearch.keyup(function()
{
var searchValue;
if (inputSearch.val().length < 3) {
searchValue = '';
} else {
searchValue = inputSearch.val().toLowerCase().trim().replace(/ /g,"-");
console.log(searchValue);
}
clearTimeout(keyupTimeout);
keyupTimeout = setTimeout(function() {
filterByString(searchValue);
}, 350);
});
function filterByString(searchValue) {
if (searchValue) {
mixer.filter('[class*="' + searchValue + '"]');
} else {
// If no searchValue, treat as filter('all')
mixer.filter('all');
}
}
checkboxGroup.addEventListener('change', function() {
var selectors = [];
// Iterate through all checkboxes, pushing the
// values of those that are checked into an array
for (var i = 0; i < checkboxes.length; i++)
{
var checkbox = checkboxes[i];
if (checkbox.checked) {selectors.push(checkbox.value); console.log(checkbox.value);}
}
// If there are values in the array, join it into a string
// using your desired logic, and send to the mixer's .filter()
// method, otherwise filter by 'all'
var selectorString = selectors.length > 0 ?
selectors.join(',') : // or '.' for AND logic
'all';
mixer.filter(selectorString);
});
});
<!-- Filter by Services -->
<select class="select2-size-lg form-control select-filter" id="select_services_box">
<option value="all">Services?</option>
<option value=".ServiceA">A</option>
<option value=".ServiceB">B</option>
<option value=".ServiceC">C</option>
<option value=".ServiceD">D</option> </select>
<!-- filter by category -->
<div id="checkbox-catg-group">
<input type="checkbox" id="checkboxGlow10" value=".categoryA"> Category A
<input type="checkbox" id="checkboxGlow11" value=".categoryB"> Category B
<input type="checkbox" id="checkboxGlow12" value=".categoryC"> Category C
<input type="checkbox" id="checkboxGlow13" value=".categoryD"> Category D
<input type="checkbox" id="checkboxGlow14" value=".categoryE"> Category E
<input type="checkbox" id="checkboxGlow15" value=".categoryF"> Category F
</div>
<!-- Filter by Locations -->
<select class="select2-size-lg form-control select-filter" id="select_location_box">
<option value="all">Locations?</option>
<option value=".locationA">LocationA</option>
<option value=".locationB">LocationB</option>
<option value=".locationC">LocationC</option>
<option value=".locationD">LocationD</option>
</select>
<!--input search -->
<input type="text" class="form-control" id="searching_text_item" placeholder="Search for Services, Categories, Locations and More..." data-ref="input-search">
<!-- here container with all records -->
<div class="row" data-ref="container" id="container_items">
<div class="col-xl-4 col-lg-4 col-md-5 col-sm-6 col-xs-9 mb-sm-1 mix categortyA categoryB locationA ServiceA title-of-the-service">
<p data-filter=".title-of-the-service">Title services A</p>
</div>
<div class="col-xl-4 col-lg-4 col-md-5 col-sm-6 col-xs-9 mb-sm-1 mix categortyA categoryC locationA ServiceA title-of-the-service">
<p data-filter=".title-of-the-service">Title services A</p>
</div>
<div class="col-xl-4 col-lg-4 col-md-5 col-sm-6 col-xs-9 mb-sm-1 mix categortyB categoryC locationC ServiceB title-of-the-service">
<p data-filter=".title-of-the-service">Title services B</p>
</div>
<div class="col-xl-4 col-lg-4 col-md-5 col-sm-6 col-xs-9 mb-sm-1 mix categortyA categoryD locationD ServiceC title-of-the-service">
<p data-filter=".title-of-the-service">Title services D</p>
</div>
</div>
Чтобы было ясно, чего я хочу достичь, это:
- Если я выберу услугу A: отображаются все услуги A .
- если я также выберу категорию A: показать все услуги A с категорией A
- , если я также выберу местоположение D: показать все услуги A с категорией A, которые находятся в местоположении D .
Как я могу получить это с MixItUp? Чего не хватает в моем коде?