标签：
原文:SharePoint 2013 扩展查阅项功能SharePoint 2013的查阅项功能，就是可以扩展其他列表字段为当前列表选项，但是选项太多的时候，会造成选择起来非常麻烦，所以，我们采取JS+Ajax的方式，改善一下这个展示，使操作更加方便。
展现效果
如下图，当我在Textbox里输入北京，会把北京开头的选项，加载到下拉选项中，如果什么都不输入，就是全部下拉选项，这样比较方便选项多的时候，进行筛选选择；
原理介绍
1、 使用JS隐藏原来的Select控件；
使用F12查看Select的Html代码，发现有Title是字段名，还有id属性，而option的value就是该item的id，所以，我们可以使用JS来操作这个select，如下图；
隐藏Select的JS脚本，就是获取所有的select控件对象，然后找到title相符合的，当然你也可以根据id来获取，id的格式应该是内部字段名称+列表GUID+字段类型标识，看你的习惯了，附JS脚本如下：
function HiddenField(strSelectTitle) { var selectObj = document.getElementsByTagName("select"); for(var i=0;i<selectObj.length;i++) { if(selectObj[i].title==strSelectTitle) { selectObj[i].style.display=‘none‘; } } } setTimeout("HiddenField(‘所在城市‘)",1)
2、 使用JS在原来Select位置下面，添加一个Text类型Input，输入文字；
这一步主要是在找到的select节点以后，使用parentNode找到父节点，然后在父节点的innerHTML里加入我们需要的Input，JS脚本附后：
if(selectObj[i].title==strSelectTitle) { selectObj[i].style.display=‘none‘; var Par=selectObj[i].parentNode; Par.innerHTML=Par.innerHTML + "<table width=‘135‘ style=‘background-color:white‘ border=‘0‘ cellspacing=‘0‘ cellpadding=‘0‘><tr><td><table width=‘100%‘ bordercolor=‘#666666‘ border=‘0‘ cellspacing=‘0‘ cellpadding=‘0‘ style=‘border-collapse:collapse;cursor:default‘ onclick=‘showHide()‘><tr><td align=‘center‘><input type=‘text‘ name=‘C_Select‘ id=‘C_Select‘ onpropertychange=‘vChange()‘></td></tr></table></td></tr><tr><td><div id=‘oOption‘ onselectstart=‘return false‘></div></td></tr></table>"; }
3、 添加下拉菜单；
以下主要就是你JS脚本，放在页面上就可以，没有什么特别需要说明的地方。当然，我们可以在相关事件上，添加我们需要的代码段。
特别：这些脚本是百度上查到的，但是他也是转载，没有原文链接，所以没有附后；
<!--隐现层的函数-->
<script type="text/javascript"> function showHide(obj){ sh={block:"none",none:"block"} //层的display属性值在"block"和"none"间不断轮换， //达到轮换隐藏和显示的效果 oOption.runtimeStyle.display=sh[oOption.currentStyle.display] } </script>
<!--鼠标移上id为oOption的对象时执行本段代码-->
<script event="onmouseover" for="oOption"> obj=event.srcElement //判断onmouseover事件是否发生在单元格上 if(obj.tagName=="TD"){ //设置事件发生所在的单元格的背景颜色 obj.style.backgroundColor="#dedede" //设置事件发生所在的单元格的字体颜色 obj.style.color="#FFFFFF" } </script>
<!--鼠标从id为oOption的对象上移开时执行本段代码-->
<script event="onmouseout" for="oOption"> obj=event.srcElement //判断onmouseout事件是否发生在单元格上 if(obj.tagName=="TD"){ //设置事件发生所在的单元格的背景颜色 obj.style.backgroundColor="#FFFFFF" //设置事件发生所在的单元格的字体颜色 obj.style.color="#000000" } </script>
<!--id为oOption的对象被单击时执行本段代码-->
<script event="onclick" for="oOption"> obj=event.srcElement //判断onmouseover事件是否发生在单元格上 if(obj.tagName=="TD"){ showHide()//隐藏层 //设置id为oSelect的对象内的文本为被点击的单元格内的文本 document.getElementById("C_Select").innerText=obj.innerText var selectObj=document.getElementsByTagName(‘SELECT‘); for(var i=0;i<selectObj.length;i++) { if(selectObj[i].title=="所在城市") { var objvalue=obj.id.substring(8,obj.id.length); selectObj[i].value=objvalue; } } } </script>
4、 写Ajax根据Input的值变化，更新下面的下拉结果；
<!—Ajax更新方法，将更新的Table放到Id为oOption的div里-->
function ajax() { //创建XMLHttpRequest对象 var xmlHttp = new XMLHttpRequest(); //获取值 var k = escape(document.getElementById("C_Select").value); var url = "http://10.5.97.92/GetLookUpAjax/GetData.aspx?k=" + k; //配置XMLHttpRequest对象 xmlHttp.open("get", url); //设置回调函数 xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById("oOption").innerHTML = xmlHttp.responseText; } } //发送请求 xmlHttp.send(null); }
<!—监视Input值变化，如果变化则执行ajax方法更新下拉列表-->
这个方法利用Input的onpropertychange事件，但是这个时间每有一个键盘动作，就会执行一次，所以我用一个隐藏域存上一次的Value的Length，和这一次比较，不一样的话执行Ajax事件，否则就当做输入但是Input域的Value值并没有变化。
function vChange() { document.getElementById("hiddenNum").value=document.getElementById("C_Select").value.length; if(document.getElementById("C_Select").value.length>document.getElementById("hiddenNum").value.length) { ajax(); } }
5、 开发一个Ajax访问的页面，返回相关结果；
这个方法没有太多要说明的，记得提升权限；利用Caml语句，获取与传入值匹配的项目集合，拼成Table返回，提供Ajax使用。
SPSecurity.RunWithElevatedPrivileges(delegate() { //此处放置需要以系统账号身份运行的代码 using (SPWeb web = new SPSite("http://10.10.10.11").OpenWeb()) { SPQuery query = new SPQuery(); if (k != string.Empty) { query.Query = @"<Where> <BeginsWith> <FieldRef Name=‘Title‘ /> <Value Type=‘Text‘>" + HttpUtility.UrlDecode(k) + @"</Value> </BeginsWith> </Where>"; } else { query.Query = ""; } SPListItemCollection itemcoll = web.Lists["City"].GetItems(query); if (itemcoll.Count != 0) { rev = "<table cellsapcing=‘0‘ cellspadding=‘3‘ border=‘0‘ width=‘100%‘> "; foreach (SPListItem item in itemcoll) { rev = rev + "<tr><td id=myselect" + item["ID"].ToString() + ">" + item["Title"].ToString() + "</td></tr>"; } rev = rev + "</table> "; } } });
总 结
整个功能的原理如上所示，利用JS替换页面的标签，变为自己的Input+下拉列表（div模拟），并监听Input的值变化，变化时通过Ajax更新div下拉列表，选择下拉列表，更新Input同时使用JS脚本更新隐藏的自带查阅项的Value值，完成我们的效果。
功能十分简单，代码段也没有难度，就是简单介绍的一个小例子，给有相关需求的人一个参考；也算自己对于SharePoint 2013里使用Ajax的一个练习吧，希望在实践中提高自己的能力。
附 录
Ø 完整的Ajax实例
http://www.cnblogs.com/oneword/archive/2011/06/04/2072558.html
Ø 使用div 模仿下拉框
http://hi.baidu.com/wangtanbao/item/6debfe0f6ae8ab21a0312d27
标签：
原文地址：http://www.cnblogs.com/lonelyxmas/p/4293824.html
