Я пытаюсь заставить текстовое поле выступать в качестве фильтра на странице, содержащей календарь FullCalendar.
Это уже работает нормально, но фильтрует только события событий календаря на основе точного соответствия содержимого.Под этим я подразумеваю, что если, например, я ищу в одной из опций события, содержащей числа с этим полем ввода, мне нужно ввести полное число, чтобы найти его.
Пример: если я хочу найтисобытие с "event.number = 95011", я должен был бы ввести "95011", чтобы найти его.Если я введу «95», он не будет отображаться, даже если он содержит эти числа как часть полного «числа».
Я хочу, чтобы он фильтровал события на основе того, что находится в этом поле поиска,и не нужно вводить всю информацию.Часть этого должна работать, как обычно работают большинство поисковых фильтров.
Вот мой код для части FullCalendar:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'listMonth, month,agendaWeek,agendaDay'
},
defaultView: 'listMonth',
locale: 'fr',
contentHeight: 600,
navLinks: true, // can click day/week names to navigate views
selectable: false,
eventRender: function(event, element, view) {
element.find('.fc-widget-header').append("<div style='color:#fff'>Conférencier choisi</div>");
element.find('.fc-title').append("<br/>" + event.lieu);
element.find('.fc-list-item-title').append("<br/>" + event.lieu);
element.find('.fc-list-item-title').append("<a href='" + event.lienconferencier + "'><div class='conferencier-calendrier-container'><div style='float:left;background-image:url(" + event.photoconferencier + ");width:40px;height:40px;background-size:cover;border-radius:100px;'></div><div style='float:left;padding-left:5px;font-weight:normal;'><strong>Conférencier</strong><br>" + event.conferencier + "</div></a>");
return ['all', event.status].indexOf($('#filter-status').val()) >= 0 &&
['all', event.client].indexOf($('#filter-contact').val()) >= 0 &&
['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 &&
['', event.numero].indexOf($('#numero').val()) >= 0;
},
selectHelper: true,
editable: false,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Example',
start: '2018-05-05',
end: '2018-05-06',
color: '#ff0000',
lieu: 'Montreal',
numero: '300445',
conferencier: 'John Doe',
photoconferencier: 'http://www.example.com/img/profile.jpg',
lienconferencier: 'http://www.example.com/profile/link.html',
url: 'http://www.google.com'
},
{
title: 'Example2',
start: '2018-05-08',
end: '2018-05-010',
color: '#ff0000',
lieu: 'New York',
numero: '300446',
conferencier: 'Steve Jobs',
photoconferencier: 'http://www.example.com/img/profile2.jpg',
lienconferencier: 'http://www.example.com/profile/link2.html',
url: 'http://www.apple.com'
},
],
});
Я также добавил этот бит, чтобы фильтровать контент на основе того, чтовыбранный или введенный в настройках фильтра (также есть выпадающие меню, но моя проблема с полями ввода текста):
$('#filter-conferencier').on('change', function () {
$('#calendar').fullCalendar('rerenderEvents');
});
$('#filter-contact').on('change', function () {
$('#calendar').fullCalendar('rerenderEvents');
});
$('#filter-status').on('change', function () {
$('#calendar').fullCalendar('rerenderEvents');
});
$('#numero').on('input', function () {
$('#calendar').fullCalendar('rerenderEvents');
});
Итак, часть, где происходит волшебство, находится в разделе «eventRender», здесь,в конце «return»:
eventRender: function(event, element) {
// Client
element.find('.fc-list-item-title').append("<a href='" + event.lienclient + "'><div class='contact-calendrier-container'><div style='float:left;padding-left:5px;font-weight:normal;'><strong>Client</strong><br>" + event.client + "</div></a>");
// Conférencier
element.find('.fc-title').append("<br/>" + event.lieu);
element.find('.fc-list-item-title').append("<br/>" + event.lieu);
element.find('.fc-list-item-title').append("<a href='" + event.lienconferencier + "'><div class='conferencier-calendrier-container'><div style='float:left;background-image:url(" + event.photoconferencier + ");width:40px;height:40px;background-size:cover;border-radius:100px;'></div><div style='float:left;padding-left:5px;font-weight:normal;'><strong>Conférencier</strong><br>" + event.conferencier + "</div></a>");
if (event.status == "Annulé") {
element.css('backgroundImage', 'url(<cms:show k_site_link />images/pattern-web.jpg)');
element.css('opacity', '0.8');
element.find('.fc-list-item-title').append("<span class='status-badge-annule'>Annulé</span>");
}
if (event.status == "Accepté et actif") {
element.find('.fc-list-item-title').append("<span class='status-badge-actif'>Actif</span>");
}
if (event.status == "En attente") {
element.find('.fc-list-item-title').append("<span class='status-badge-attente'>En attente</span>");
}
return ['all', event.status].indexOf($('#filter-status').val()) >= 0 &&
['all', event.client].indexOf($('#filter-contact').val()) >= 0 &&
['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0 &&
['', event.numero].indexOf($('#numero').val()) >= 0;
},
Эта строка обрабатывает поле фильтра «нумеро»:
['', event.numero].indexOf($('#numero').val()) >= 0;
Что мне нужно изменить, чтобы убедиться, что оносканирует на частичное совпадение, а не просто показывает события, которые на 100% соответствуют его содержимому?
Я пытался:
['', event.numero].indexOf($('#numero').includes($('#numero').val())) >= 0;
Но он сломал скрипт, и ничего не работало или не показывалось.
Английский не является моим основным языком, поэтому мне сложно объяснить мою ситуацию, но, надеюсь, вы поймете мою проблему здесь.
Большое спасибо