Filtering Look up Columns with Javascript

Question

I'm trying to find a way to dynamically filter a look up column on the new and edit forms in SharePoint 2013.

I want to be able to get a value from the URL and use that to filter the look up choices. Something like, only show choices where "column A" equals "Value from URL"

Has anyone ever done this? or know of any references i can use? I do not want to filter the choices based on another column which seems to be the common question people ask.

Answer 1

Since CSR is the default rendering mode in SharePoint 2013, I would recommend the following approach to manipulate form fields in New/Edit Form page. As an introductory please follow this article Introduction to Client Side Rendering in SharePoint 2013.

Suppose a Tasks list that contains a Task Category lookup field. Then the following rendering template could be used for setting TaskCategory lookup field value retrieved from a query string parameter named cat:

(function () {
    var ctx = {};
    ctx.Templates = {};
    ctx.Templates.Fields = {
        'TaskCategory': {
            'NewForm': renderTaskCategory
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();


function renderTaskCategory(ctx) {
    var catId = GetUrlKeyValue('cat'); //extract cat parameter from a query string 
    ctx.CurrentFieldValue =  catId; //set lookup field value 
    return SPFieldLookup_Edit(ctx); //default template for rendering Lookup field control
}

How to apply changes

In order to apply the changes we need to set the JSLink property of XLV web part:

• First of all, let's save this JS template and name it Tasks.js. Then upload the specified into SharePoint Site Assets library
• open New Form page in Edit mode and go to web part properties
• find under Miscellaneous group JSLink property and specify its value: ~sitecollection/SiteAssets/Task.js as shown on figure below

Result

Parse query string in SharePoint 2013

SharePoint JS Library contains GetUrlKeyValue function for extracting query string parameter, for example:

var itemId = GetUrlKeyValue('ID'); //get Item Id from query string

Answer 2

I ended up finding what i needed with SPServices. I used the filter drop down function, Code below.

http://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPFilterDropdown

$().SPServices.SPFilterDropdown({
         relationshipList: "{*List ID*}",
         relationshipListColumn: "*column Name*",
         columnName: "*Column Nam*e",
         CAMLQuery: "**CAML QUERY**",
         completefunc: null,
         debug: true 
    });

Answer 3

The Jquery code below reads the query string value and prepopulates the lookup field.

 $(document).ready(function () {
        JSRequest.EnsureSetup();
        var dropDownValue = JSRequest.QueryString['AccountReference'];
        if (dropDownValue) {
            $("select[title='External Client Account']").children("option").each(function () {
                if ($(this).text() == dropDownValue) {
                    $(this).attr('selected', 'selected');
                }
            });
        }
    });

Source: http://www.sharepointnadeem.com/2014/10/sharepoint-pre-populate-lookup-field-in.html