Issues in SharePoint that you need to double-click to resolve the Super long lookup field

Summary:

If the lookup field references more than 20 list data, the lookup field will not be output through a select tag, but rather through a textbox, and the textbox that Microsoft wants to provide can provide input filtering functionality to the user, The problem, however, is that users need to double-click instead of click to select the contents of the lookup Drop-down list, and the user experience is not friendly. This article will provide a way for users to click to select an extra long list through JavaScript. There are two other ways of thinking, one is to write a lookup field of your own, note that the lookup field cannot be inherited; another idea is to change the behavior of the output through the adapter of the control.

Question Introduction:

As shown in the following illustration, we can see that the first Test1 field reference has only 19 data, but the list of TEST2 references is nearly hundreds of data, and it is clear that the two Drop-down list styles are not the same. And when you select the Test2 drop-down list, we will find that we need to click two times to select the corresponding two items.

Solution Idea:

We looked at the HTML code back and found that the output for the Test1 field was as follows, using the HTML SELECT element:

However, the output for the Test2 field is as follows, using the INPUT element of type text:

Further, we'll look at the HTML code for the Test2 field, and we'll find a few things to focus on:

Opthid Property: This property specifies a hidden control that stores the selected item ID;

Choices Property: This property contains all the information that needs to be displayed and the ID behind it;

Match attribute: This property contains information about the content being selected;

When you click on the small arrow in the Drop-down list, a method called Showdropdown is actually called. This method is derived from the Core.js file, further viewing the code of the Showdropdown method we will find that this method invokes ensureselectelement to add a SELECT element after the current text box, followed by the Filterchoice method to Selec The t element adds an option value, and the last select content selects the Setctrlfromopt method to set the text content to the match property of the text element. Additionally, the value value corresponding to the text content is set to the hidden control specified by the Opthid property of the Filterchoice element. Finally, in JS, set the value to the text box.

More Wonderful content: http://www.bianceng.cnhttp://www.bianceng.cn/web/sharepoint/

So our idea is to generate a SELECT element through JavaScript script after the load is finished, initialize it through the contents of the choices, and then set its OnChange event to ensure that the new content is selected and the corresponding value is set to the original text box. This saves the time to be able to save in SharePoint, and finally we hide the original text box through the property settings.

Solution steps:

The first step is to introduce the jquery library (which can be downloaded to the jquey.com Web site), upload it through SharePoint Designer to the related List folder, and then through SharePoint Designer opens the NewForm.aspx page and adds a reference to the library in PlaceHolderMain, for example:

<script type= "Text/javascript" src= "Jquery-1.6.1.min.js" > </script>

The second step is to add the following code:

<script type= "Text/javascript" >
$ (document). Ready (function () {
    var ctrl1 = $ ("input[title= ' Test2 ']")
    var ctrl = document.getElementById (CTRL1.ATTR (' id '));
    Ctrl.style.display= "None";
    var select=document.createelement ("select");
    Ctrl.parentNode.appendChild (select);
    Select.outerhtml= "<select id= '" + ctrl.opt + "' ctrl= '" +ctrl.id+ "' class= ' Ms-lookuptypeindropdown '" name= ' "+ ctrl.opt + "' ></select>";
    var opt = document.getElementById (ctrl.opt);
    Fillchoice (OPT, CTRL, "");   
});

First we get a reference to the original Test2 field via the jquery selector, and then we get a reference to the text box control itself via this ID (interested friends can directly modify the rest of the code completely through jquery to operate, I for the sake of diagram, Most code follows SharePoint Core.js, then hides the text box control, then creates a SELECT element, and then invokes the custom Fillchoice method to initialize the Select element, which draws on the Core.js Ilterchoice method.

function Fillchoice (OPT, CTRL, Strval) {var i;
    var strname=opt.name;
    var strhtml= "";
    var strid=opt.id;
    var stropts=ctrl.choices;
    var rgopt=stropts.split ("|");
    var x=absleft (ctrl);
    var y=abstop (ctrl) +ctrl.offsetheight;
    var imac=rgopt.length-1;
        for (i=0 i < rgopt.length; i=i+2) {var stropt=rgopt[i];
            while (I < iMac-1 && rgopt[i+1].length==0) {stropt=stropt+ "|";
            i++;
            if (I < iMac-1) {stropt=stropt+rgopt[i+1];
        } i++;
        } var strvalue=rgopt[i+1];
        var strloweropt=stropt.tolocalelowercase ();
        var strlowerval=strval.tolocalelowercase (); if (Strloweropt.indexof (strlowerval) ==0) {strhtml+= "<option value=\" "+strvalue+" \ ">" +stshtmlenco        De (stropt) + "</option>";
    } var strhandler= "Onchange=handleclick ()";
    var stropthtml= ""; StroPthtml= "<select tabindex= '-1 ' ctrl= '" +ctrl.id+ "' name= '" +strname+ "' id= '" +strid+ "" +strhandler;
         
    stropthtml+= "style= ' position:absolute;z-index:2;left:" +x+ "Px;top:" +y+ "px ' >" +strhtml+ "</select>";
opt.outerhtml=stropthtml;
function Handleclick () {var opt = event.srcelement; var ctrl = document.getElementById (Opt.ctrl);
Setctrlfromopt (ctrl, OPT); }

The Fillchoice method initializes the custom select list option by extracting the choices property value of the original text box control, noting that the onchange event is specified as the Handleclick processor. The Handleclick event calls the Core.js Setctrlfromopt method to be worth setting.

Effect View:

After saving, we can see that the second field has a style that is consistent with the normal style of less than 20 and that the list can be saved normally.

Description

The solution is not tested for Firefox.

Author: cnblogs Johnsonwang