Lookup features in SharePoint 2013

The lookup feature of SharePoint 2013 is the ability to extend other list fields to the current list option, but when too many options are available, it can be cumbersome to choose, so we take a js+ajax approach and improve the presentation to make the operation more convenient.

Show effect

The following figure, when I entered in the textbox in Beijing, will be the opening of the Beijing option, loaded into the Drop-down options, if nothing input, is all drop-down options, so more convenient options, screening options;

Principle Introduction

1, use JS to hide the original select control;

Using F12 to view the HTML code of the Select, we found that title is the field name and id attribute, and option value is the ID of the item, so we can use JS to manipulate this select, as shown below;

Hidden Select JS Script, is to get all the Select control objects, and then find the title of the match, of course, you can also be obtained by ID, the format of the ID should be the internal field name + List guid+ field type identification, see your habits, attached JS script as follows:

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 ("The City of HiddenField"), 1

2, the use of JS in the original select location below, add a text type input, input text;

This step is mainly after the Select node found, use ParentNode to find the parent node, and then in the parent node innerHTML Add the Input,js script we need to attach:

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, add drop-down menu;

The following is your JS script, placed on the page can be, there is no particular need to explain the place. Of course, we can add the code snippets we need on the related events.

Special: These scripts are found on Baidu, but he is also reproduced, there is no original link, so there is no attached;

function--> of the hidden layer of <!--

<script type= "Text/javascript" >
function showhide (obj) {
    sh={block: ' None ', none: ' Block '}
    // The Display property value of the layer is rotated between "block" and "none", and/
    or the effect of rotation is hidden and displayed
    ooption.runtimestyle.display=sh[ OOption.currentStyle.display]
}
</script>

< executes this code!--mouse over an object with an ID of ooption-->

<script event= "onmouseover" for= "ooption" >
    obj=event.srcelement
      
    //Determine if the onmouseover event occurred on the cell
    if (obj.tagname== "TD") {
      
    //Set the background color of the cell where the event occurred
    obj.style.backgroundcolor= "#dedede"
      
    // Sets the font color of the cell where the event occurred
    obj.style.color= "#FFFFFF"
}
</script>

< executes this code!--the mouse moves up from an object with an ID of ooption-->

<script event= "onmouseout" for= "ooption" >
    obj=event.srcelement
    //Determine if the onMouseOut event occurs on the cell
    if ( obj.tagname== "TD" {
    //Set the background color of the cell where the event occurred
    obj.style.backgroundcolor= "#FFFFFF"
    //Set the font color of the cell where the event occurred
    obj.style.color= "#000000"
}
</script>

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/web/sharepoint/

< executes this code when the object!--ID ooption is clicked-->

<script event= "onclick" for= "ooption" >
    obj=event.srcelement
    //Determine if the onmouseover event occurs on the cell
    if ( obj.tagname== "TD") {
        showhide ()
        //Hide layer//Set the text within the object with ID Oselect as the text within the clicked cell
        document.getElementById ("C_ Select "). Innertext=obj.innertext
        var selectobj=document.getelementsbytagname (' select ');
        for (Var i=0;i<selectobj.length;i++)
        {
            if (selectobj[i].title== "city")
            {
                var objvalue= Obj.id.substring (8,obj.id.length);
                Selectobj[i].value=objvalue
    }
}} </script>