使用 JavaScript 过滤 SharePoint 2010 查找列

场景

SharePoint 2010 自定义列表（或文档库）包含一个查找列，我们需要根据某些条件过滤其值。 这适用于级联下拉列表，其中目标下拉列表是一个查找列。

一个典型的例子是根据所选区域过滤国家/地区。

在 SharePoint 2010 中，我们将区域和国家/地区都作为查找列，分别引用各自的列表。 国家/地区列表将包含一个区域列（在区域列表上查找），指示该国家/地区所属的区域。

通常，我们将编写 JavaScript 代码来执行以下操作

1. 使用 getTagFromIdentifierAndTitle 函数（函数实现见下文代码）获取国家/地区下拉控制。
2. 根据所选区域从国家/地区列表中获取国家/地区值（使用 CAML 查询）。
3. 删除国家/地区下拉列表中不存在于检索到的值中的值。 我们需要这样做，因为国家/地区列是一个查找列，并且值将自动填充。

问题

问题在于查找列在 Internet Explorer 中的呈现方式，当查找列中的值多于 20 个时。 如果查找列中的项目数少于 20 个，则将其呈现为 Option 标签。 但是，如果项目数是 20 个或更多，则查找列将呈现为 INPUT 标签。 因此，在编写过滤逻辑时，我们需要考虑这种复杂性。

解决方案

首先，我们将声明所需的变量并配置 SharePoint 的 On Load 函数。

var result;
_spBodyOnLoadFunctionNames.push("Initialize()");

在我的示例中，我从一个隐藏字段变量中获取用于过滤的值，目标下拉列表将根据该值进行过滤。 然后，我编写一个 CAML 查询来从国家/地区列表中获取值，并将结果加载到上下文变量中。

function Initilize() {
	var ctx = new SP.ClientContext.get_current();
	var filterToken = document.getElementById(");
	var website = ctx.get_web();
	var targetList = website.get_lists().getByTitle("CountryList");
	var camlQuery = "";
	camlQuery += "" + filterToken.value + "";
	camlQuery += "";
	var query = new SP.CamlQuery();
	query.set_viewXml(camlQuery);
	result = targetList.getItems(query);
	ctx.load(result);
	ctx.executeQueryAsync(OnQuerySucceeded, OnQueryFailed);
}

如果上述过程成功，我们希望触发 OnQuerySucceeded 函数，否则我们希望调用 OnQueryFailed 方法。

以下是 getTagFromIdentifierAndTitle 函数的实现

function getTagFromIdentifierAndTitle(tagName, identifier, title) {
	var len = identifier.length;
	var tags = document.getElementsByTagName(tagName);
	for (var i = 0; i < tags.length; i++) {
		var tempString = tags[i].id;
		if (tags[i].title == title && (identifier == "" || 
		tempString.indexOf(identifier) == tempString.length – len)) {
			return tags[i];
		}
	}
	return null;
}

在 OnQuerySucceeded 函数中，我们将检查下拉列表是否呈现为 option 标签或 input 标签。 根据此值，我们将相应地处理过滤。 在此示例中，我仅编写了超过 20 个项目的情况下的代码，即下拉列表呈现为 input 标签时。

function onQuerySucceeded() {
	var isOption = false;
	var arrayLookUpValue = new Array();
	var arrayLookUpId = new Array();
	var walker = 0;
	var theInput = getTagFromIdentifierAndTitle("select", "", "Country");
 
	/*If theInput variable is null here, we can infer that the control 
	has been rendered as an input tag*/
	if (theInput == null) {
		theInput = getTagFromIdentifierAndTitle("input", "", "Country");
	 
		/*Set textbox as readonly so that user is unable to type in the values*/
		theInput.setAttribute("readonly", "true");
		isOption = false;
	}
	else {
		isOption = true;
	}
 
	if (theInput != null) {
		var enumerator = result.getEnumerator();
 
		/*Here we iterate through the result and add the values to array. 
		I have used 2 different arrays to stored Id and Value 
		for simplifying the logic*/
		while (enumerator.moveNext())
		{
			var lookUpItem = enumerator.get_current();
			var lookUpValue = lookUpItem.get_item
					("Action").get_lookupValue();
			var lookUpId = lookUpItem.get_item("Action").get_lookupId();
			if (lookUpValue != null && lookUpValue != undefined){
				arrayLookUpValue[walker] = lookUpValue;
			}
			else{
				arrayLookUpValue[walker] = "";
			}
			if (lookUpId != null && lookUpId != undefined){
				arrayLookUpId[walker] = lookUpId;
			}
			else{
				arrayLookUpId[walker] = "";
			}
			walker++;
		}
 
		/*If the drop-down is Option tag*/
		if (isOption != true) {
			var newChoicesList = ";
			for (var i = 0; i 0){ 
				/*Set the values to choice property of the 
				drop-down variable*/
				theInput.choices = newChoicesList.substring
						(0, newChoicesList.length – 1);
			}
			else{
				theInput.choices = "(None)|0?;
			}
			theInput.value = "";
		}	
		else{
			/*Code to handle the less than 20 items scenario*/
		}
	}
}
function onQueryFailed() {}