用于匹配部分内容的全日历的输入文本筛选器

Question

我正在尝试使文本字段充当包含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;
},

这是处理"numero"过滤器字段的行：

['', event.numero].indexOf($('#numero').val()) >= 0;

我需要更改什么以确保它也扫描部分匹配，而不仅仅是显示与其内容 100% 匹配的事件？

我试过了：

['', event.numero].indexOf($('#numero').includes($('#numero').val())) >= 0;

但它破坏了剧本，没有任何工作或显示。

英语不是我的主要语言，所以我很难解释我的情况，但希望你能理解我的问题。

谢谢

Answer 1

也许

(
$('#numero').val().trim() === ''
|| event.numero.indexOf($('#numero').val()) > -1
)

您正在执行的 indexOf 是在数组上，而不是在数组中的每个元素上，因此它只会在完全匹配的情况下找到它。 如果要查找字符串中的值，则必须直接执行此操作。

Answer 2

我不知道这是否是你想要的，但我这样做了：

我输入什么将过滤标题

<input type="text" id="searchInput">

与 JQuery：

$("#searchInput").keyup(function(){
var input = this.value;
var newSource = source.filter(elem => 
(elem.title.toLowerCase().indexOf(input.toLowerCase()) > -1) );
refreshCalendar(newSource)
});
function refreshCalendar(newSource) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', newSource);
$('#calendar').fullCalendar('refetchEvents');
}

如果源是日历中的所有事件，请将其发送到函数以刷新此事件。

Answer 3

完成 TAPLAR 的答案，代码如下所示：

eventRender: function(info) { 
$(info.el).tooltip({
title: info.event.title,
});
$(info.el).bind('dblclick', function() {
alert('double click!');
});
var search = document.getElementById("SearchInput").value;
if (search.length > 0){ 
//return ['', info.event.title].indexOf(search) > -1
return info.event.title.indexOf(search) > -1
}else{
return ['all', info.event.groupId].indexOf($('#bandera2').val()) >= 0
}        
}