使用 JQuery 对特定列表字段进行 Sharepoint 即时列表过滤答案

【问题标题】：Sharepoint Instant List Filter on Specific List Fields Using JQuery使用 JQuery 对特定列表字段进行 Sharepoint 即时列表过滤
【发布时间】：2015-04-14 12:06:09
【问题描述】：

我有以下代码部分正在使用内容编辑器 Web 部件处理 SharePoint 列表上的即时列表过滤器。就目前而言，它通过将用户输入与列表当前视图中所有列中的信息进行比较来过滤列表。我正在努力研究如何更改此代码，以便它仅将用户输入与特定字段进行比较。我知道这听起来类似于 OOB 列表过滤器的作用，但这不适合我的需要。

input.keyup(function() // On key presses
{
    listItems.each(function() // for each items in our list
    {
    var text = $j(this).text().toLowerCase(); // get all the text values of that list item
    if (text.indexOf(input.val().toLowerCase()) != -1) // does it match the text of our filter?
{ 
         $j(this).show();// yes! show it!
    }
    else
{
         $j(this).hide(); // nope! hide it!
    }
    });
});

我的工作前提是我可以更改第 6 行，以便我可以引用所需字段作为数据来比较用户输入，但无济于事。

【问题讨论】：

标签： jquery list sharepoint filter

【解决方案1】：

它可能不适合您的用例，这是过滤 VIEWS 的替代（和古怪）解决方案。

代码进入计算列，如果设置为 datatype=Number 将执行 HTML 和 JavaScript

因此无需向页面添加 CEWP 或任何其他代码。它适用于计算列显示在视图中的任何地方

我将此计算列添加到 SharePoint Online 上的标准任务列表中。应该也适用于 SP2010 和 SP2013。

之所以有效，是因为当显示计算列时，它会为父 DOM 元素添加一个 EventListener（为每个显示的项目！）。
此时搜索框本身是还没加载！所以你不能在输入标签上附加keyup事件

当您在搜索框中键入时，事件会在 DOM 中冒泡并被所有函数捕获。

使用公式创建一个计算列，并将数据类型设置为数字：

="<img src=_layouts/images/blank.gif onload={"
&"TR=this.parentNode.parentNode.parentNode;"
&"TR.parentNode.parentNode.parentNode.addEventListener("
&"""keyup"
&""",(function(e){this.style.backgroundColor="""
&[Task Name]
&""".indexOf(e.srcElement.value)===-1?""lightcoral"":""lightgreen""}).bind(TR)"
&")}>"

空白 IMG 元素上的 onload 事件是在页面加载时执行功能的技巧；此函数将一堆 parentNodes 向上（需要在搜索 DIV 之上！）附加这些 keyup 事件。

对于搜索框中的每一次按键，事件都会冒泡并调用所有（项目）函数。

因为函数通过 bind(TR) 接收 TR 元素的范围，所以函数在 TR 上下文中执行；它所要做的就是与在搜索框中输入的内容进行比较 (e=event) 并为 TR 着色（项目行）
您可以将 .backgroundColor 部分替换为 .display 并将颜色值设置为 none 和 initial 以显示/隐藏项目行。

如果您想在所有/其他列中搜索，您只需将 &[Task Name]& 部分替换为您要过滤的列即可。

注意每个需要 JavaScript 引号的实例使用的 2x 双引号

还要注意在 Javascript 中添加空格会破坏 onload 声明，因为浏览器会为每个非空格中断的字符串添加引号

唉，在计算列中调试这段代码是一个真正的 PITA。

【讨论】：