如何实现FullCalendar文本输入框的模糊匹配过滤？

Hey there, I see the issue—your current filter only works when you type the full event.numero because you're using an array indexOf check which enforces exact matches. Let's tweak that logic to let users search with partial values easily.

The Problem with Your Current Logic #

This line is what's locking you into exact matches:

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

It only returns true if the input is empty or exactly equal to event.numero. We need to flip this to check if event.numero contains the input text instead.

Updated Filter Logic #

Replace that numero check with code that supports partial matches. Here's the full modified eventRender function:

eventRender: function(event, element, view) {
    // Your existing DOM modification code stays unchanged
    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>");
    
    // New fuzzy matching logic for numero
    const numeroInput = $('#numero').val().trim();
    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 
        && (numeroInput === '' || event.numero.includes(numeroInput));
},

Key Improvements #

• trim(): Ignores accidental leading/trailing spaces in the input, so users don't get confused by whitespace breaking matches
• includes(): Checks if event.numero contains the input string anywhere—so typing 95 will match any event with 95 in its numero (like 95011)
• Fallback for Old Browsers: If you need to support IE, swap includes with indexOf (same functionality):

  numeroInput === '' || event.numero.indexOf(numeroInput) !== -1
  

Now when users type part of a numero, the calendar will automatically show all matching events, just like you want!

内容的提问来源于stack exchange，提问作者larin555