-
In a browser, create a list (ClassJavascriptLookup in my example) that uses a lookup column. In my case the lookup column is InstructorLookup. The column displayed is InstructorName and the filtering will be done such that only the Instructors that have a Status of Active will be shown.
-
Using SharePoint Designer, expand the files under the list you are using. Make a backup of the form (EditForm.aspx or NewForm.aspx) you will be editing just in case. Check out the file and then double click on the it to open.
-
Place your cursor right after the existing form. You can do this by selecting the existing form by clicking on it (as below) and then hitting your right arrow key.
-
From the top menu select Data View/ Insert Data View.
-
Click the link “Click a data source in the…”
-
In the Data Source Library tab on the right side, select the list you want for the filtered lookup. Then click on Show Data.
-
Select the field you want to show in the dropdown.
-
Insert Selected Fields as… Multiple Item View
-
Click on the arrow in the upper right of the inserted data view to display the Common Data View Tasks menu.
-
Set the filter to pull only the items you want to show in the dropdown.
-
Set the sort order.
-
Click on Change Layout task. Under the Layout tab, choose the style for “The dropdown menu of titles style…”
Click Yes on the popup that displays.
-
Make sure you have Split mode showing for SharePoint Designer.
-
Click on the dropdown that is now showing in the Design Window. The associated code will be highlighted in the Code pane.
-
In the highlighted code displayed for the newly created dropdown, find the line:
<select name=”ID” size=”1″>
<option selected=”true” value=”0″>Choose One…</option>
Change the line to the following by commenting out the 2nd line and changing from name to id:
<select id=”FilteredLookupList” size=”1″>
<!–<option selected=”true” value=”0″>Choose One…</option>–>
-
Find the line below for the new dropdown:
<xsl:template name=”dvt_1.rowview”>
Change it from this (note you will probably have something other than InstructorName):
<xsl:template name=”dvt_1.rowview”>
<option>
<xsl:value-of select=”@InstructorName” />
</option>
</xsl:template>
To this:
<xsl:template name=”dvt_1.rowview”>
<xsl:variable name=”SelectValue” select=”@ID”/>
<option value=”{$SelectValue}”>
<xsl:value-of select=”@InstructorName” />
</option>
</xsl:template>
-
Paste in the following code directly after the PlaceHolderMain tag (you will need to change Instructor to the name of your Lookup column):
<script language=”javascript” type=”text/javascript”>
_spBodyOnLoadFunctionNames.push(“callFillLookupValues”);
function callFillLookupValues() {
fillLookupValues(“FilteredLookupList”, “Instructor”);
}
</script>
-
Next you will need to add the method for filLookupValues() and a supporting method. You can add these to your master page or a separate JavaScript file as desired especially when considering reuse. However, for simplicity here, let’s just add these to our existing page for now. Directly after the function callFillLookupValues() and before the closing script tag you added in the previous step, add the following code:
function fillLookupValues(filterDataView, lookupToFilter) {
var data = document.getElementById(filterDataView);
var lookup = getTagFromIdentifierAndTitle(“select”, “Lookup”, lookupToFilter);
var selectedText = “”;
// if theSelect is null, it means that the target list has more than
// 20 items, and the Lookup is being rendered with an input element
if (lookup == null) {
var theInput = getTagFromIdentifierAndTitle(“input”,”",lookupToFilter);
selectedText = theInput.value;
theInput.choices = “”;
var filteredChoices = “”;
for (i=0;i<data.options.length;i++)
{
var optionText = data.options[i].text;
var optionValue = data.options[i].value;
if (i>0)
{
filteredChoices = filteredChoices + “|”;
}
filteredChoices = filteredChoices + optionText + “|” + optionValue ;
}
theInput.choices = filteredChoices ;
}
else
{
selectedText = lookup.options[lookup.selectedIndex].text;
//alert(data.innerHTML);
lookup.innerHTML = “”;
for (i=0;i<data.options.length;i++)
{
var optionText = data.options[i].text;
var optionValue = data.options[i].value;
lookup.options[i]=new Option(optionText, optionValue, false, (optionText == selectedText));
}
}
}
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;
}
-
Hide the dropdown you added from being displayed on the page by adding style=”display:none;” to the line you previously changed in Step 15 above. Save your changed form.
<select id=”FilteredLookupList” size=”1″ style=”display:none;”>
-
Go back to your list in the browser. Open the form you changed (New or Edit). Now you will see your lookup with the filtered values. In my case only Active Instructors are shown.
-
A couple of quick notes:
- This should also be compatible in Firefox thanks to a colleague of mine, Jim Wilt, who made a couple small tweaks (.innerText to .text and name to id).
- The time it takes for your filter to be applied may be affected by where you place your JavaScript (which file).
