如何通过输入框结合FullCalendar实现日程事件筛选？

嘿，我知道你已经搞定了下拉菜单筛选FullCalendar事件，现在想换成输入框实时关键词筛选对吧？这就给你安排具体的实现步骤，和你之前的下拉筛选逻辑可以无缝结合～

第一步：添加输入框HTML #

先在页面上放一个用于输入关键词的输入框：

<input type="text" id="event-keyword-filter" placeholder="输入关键词筛选事件..." />

第二步：监听输入事件触发日历重渲染 #

和你之前处理下拉框的逻辑类似，监听输入框的input事件（实时响应输入，不用等回车），触发日历重新渲染事件：

$('#event-keyword-filter').on('input', function() {
  $('#calendar').fullCalendar('rerenderEvents');
});

第三步：在FullCalendar中实现关键词过滤逻辑 #

这里有两种常用的实现方式，你可以根据自己的场景选择：

方式1：通过eventRender回调过滤（适合事件量不大的场景） #

在FullCalendar的配置里，修改eventRender回调，判断每个事件是否匹配关键词：

$('#calendar').fullCalendar({
  // 你的其他配置（比如header、defaultView等）...
  eventRender: function(event, element) {
    // 获取输入框的关键词，转小写实现不区分大小写搜索
    const keyword = $('#event-keyword-filter').val().trim().toLowerCase();
    
    // 如果关键词为空，直接显示所有事件
    if (!keyword) return true;
    
    // 检查事件的标题、描述等字段是否包含关键词
    // 这里可以根据你的事件结构调整需要筛选的字段
    const matchesTitle = event.title.toLowerCase().includes(keyword);
    const matchesDesc = event.description ? event.description.toLowerCase().includes(keyword) : false;
    
    // 只要有一个字段匹配就显示该事件
    return matchesTitle || matchesDesc;
  },
  // 其他配置...
});

方式2：动态更新事件源（适合事件量较大的场景，性能更好） #

如果你的事件是存储在一个原始数组里，可以直接过滤数组后更新日历的事件源：

// 假设这是你的原始事件数组
const allEvents = [
  { title: "产品评审会", start: "2024-05-20", description: "针对V2.0版本讨论" },
  { title: "技术分享会", start: "2024-05-22", description: "前端性能优化主题" },
  // 更多事件...
];

// 监听输入框事件，实时过滤并更新事件
$('#event-keyword-filter').on('input', function() {
  const keyword = $(this).val().trim().toLowerCase();
  
  // 过滤事件数组
  const filteredEvents = allEvents.filter(event => {
    const matchesTitle = event.title.toLowerCase().includes(keyword);
    const matchesDesc = event.description ? event.description.toLowerCase().includes(keyword) : false;
    return matchesTitle || matchesDesc;
  });
  
  // 先移除旧事件，再添加过滤后的事件源
  $('#calendar').fullCalendar('removeEvents');
  $('#calendar').fullCalendar('addEventSource', filteredEvents);
});

第四步：结合原有的下拉筛选（如果需要保留） #

如果你想同时保留下拉筛选和关键词筛选，只需要在过滤逻辑里把两个条件结合起来就行。比如在eventRender里：

eventRender: function(event, element) {
  // 获取下拉框的筛选值
  const selectedConferencier = $('#filter-conferencier').val();
  // 获取关键词
  const keyword = $('#event-keyword-filter').val().trim().toLowerCase();
  
  // 先处理下拉筛选
  let showEvent = true;
  if (selectedConferencier && selectedConferencier !== "all") {
    // 假设你的事件里有conferencier字段对应下拉选项值
    showEvent = event.conferencier === selectedConferencier;
  }
  
  // 再处理关键词筛选
  if (showEvent && keyword) {
    const matchesTitle = event.title.toLowerCase().includes(keyword);
    const matchesDesc = event.description ? event.description.toLowerCase().includes(keyword) : false;
    showEvent = matchesTitle || matchesDesc;
  }
  
  return showEvent;
}

这样就能实现下拉框+输入框的组合筛选啦～

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