Question

我正在尝试将文本字段用作包含FullCalendar日历的页面上的过滤器。

它已经正常工作，但它只根据确切的内容匹配过滤日历事件的事件。通过这个，我的意思是，如果我在一个包含该输入字段的数字的事件选项中搜索，我需要输入完整的数字来找到它。

实施例：如果我想找到“event.number = 95011”的事件，我必须输入“95011”才能找到它。如果我输入“95”，即使它包含这些数字作为完整“数字”的一部分，它也不会显示输入。

我希望它根据搜索字段中的内容过滤事件，而不需要输入整个信息。它的一部分应该可行，就像大多数搜索过滤器通常一样。

这是我的FullCalendar部分代码：

  $('#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: 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;

  },

所以魔术发生的部分在“eventRender”部分，在这里，在最后的“返回”部分：

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

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

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

我需要更改哪些内容以确保其扫描部分匹配，而不仅仅是显示与其内容100％匹配的事件？

我试过了：

redux

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

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

非常感谢

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的回答，代码看起来像这样：

<input id="password" >

输入FullCalendar匹配部分内容的文本过滤器

3 个答案: