Autocomplete field on Item Form

Question

I spent some time looking up options for an autocomplete or searchable field on a form and decided to go with Anton Khritonenkov's instructions (http://www.codeproject.com/Articles/637675/Multiple-form-fields-autocomplete-for-SharePoint) on implementing a JavaScript solution.

I followed up until "Internal implementation of the plugin." I have yet to get it to work and believe I might be missing something. I have little experience working with JavaScript and jQuery so I may be missing something completely obvious. Below is the code I implemented into my NewForm.aspx in SharePoint Designer. I uploaded the necessary files to my Styles Library. Also, I put the actual url in place of "~sitecollection" just removed it here for privacy reasons. I included the last tag to better show the location of code in document.

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="FormCustomRedirectControl" AllowMultipleControls="true"/>
<SharePoint:UIVersionedContent UIVersion="4" runat="server"><ContentTemplate>
    <SharePoint:CssRegistration Name="forms.css" runat="server"/>
</ContentTemplate></SharePoint:UIVersionedContent>
<SharePoint:ScriptLink runat="server" 
  Name="~sitecollection/Style Library/jquery.min.js" Language="javascript"/>
<SharePoint:ScriptLink runat="server" 
  Name="~sitecollection/Style Library/jquery.SPServices.min.js" Language="javascript"/>
<SharePoint:ScriptLink runat="server" 
  Name="~sitecollection/TerritoryManagement/Style Library/jquery-ui-1.10.3/jquery-ui-1.10.3.custom.
    min.js" Language="javascript"/>       
<SharePoint:ScriptLink runat="server" 
  Name="~sitecollection/Style Library/jquery.plumFormAutocomplete.js" Language="javascript"/>        
<SharePoint:CSSRegistration name="<% $SPUrl:~sitecollection/Style Library/
    jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css%>" runat="server"/>
<script type="text/javascipt">
    $(document).ready(function()
    {
        //get control for autocomplete field
        var fieldControl = $.getFieldControl('Account');

        //call autocomplete plugin for field control
        fieldControl.plumFormAutocomplete({
            sourceList: 'Accounts',
            sourceMatchField: 'Account Name',
            fieldsMapping: [{sourceField:'Account Name', targetField: 'Account'}]
        });
    }
</script>

I need this functionality because I am using a Lookup Column that will have a user choose from a vast number of accounts (hundreds) and I would really like to not have users scrolling through all the options. If you have a suggestion other than the one above I am open to it.

I run SharePoint 2013 Online and have SharePoint Designer 2013.

Thank you in advance for any feedback any of you may have.

Answer 1

The name of the field should be the "internal" name of the field. Go to list/library settings, and click on the column.. Now, look at the URL. The URL should look something like this:

   .../sites/siteName/_layouts/15/FldEdit.aspx?List=%7BCC7FB7B9-CCD1-466F-918A-8E99D9FB36B1%7D&Field=Account_x0020_Name

Examine the last part: "&Field=InsertInternalFieldNameHERE"

So, in your case, odds are the internal name of the column is "Account_x0020_Name" as the "_x0020" is the HTML's way of inserting a space.

To fix your code simply update the "source match field" to be the internal column name (most likely "Account_x0020_Name")

Edit: Secondarily, you should clean up the amount of code you add directly to the aspx page. I would save this functionality as autocomplete.js in your style library. Then simply add a scriptlink tag referring to your autocomplete file. This keeps you from adding extra code and having your .aspx page being cluttered. Other than that, if this still doesn't work, use chrome/IE's "developer tools" to figure out where the error is stemming from. If you get any errors in the console, edit your post and paste a picture.

Answer 2

I was not able to fix the exact issue above but did find an alternative solution that works great and is much easier to implement than originally attempted.

First off, you need to use a textbox field and not a lookup column.

Open the NewForm.aspx page in the browser, edit the page and add a web part. I added the script editor and added the following code to the snippet:

<script language="javascript" src="//code.jquery.com/jquery-1.6.2.min.js"type="text/javascript">
</script>
<script language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js" type="text/javascript">
</script>
<script type="text/javascript">    
$(document).ready(function () {
        $().SPServices.SPAutocomplete({ 
           sourceList: "SourceList", // Source List Name 
           sourceColumn: "Title", // Source List Column from where you want to fetch it.            
           columnName: "DestinationListColumn", // Destination List Column where you wan to add it.            
           ignoreCase: true,            
           numChars: 2,            
           slideDownSpeed: 'fast'        
        });    
});
</script>

Make sure to change the "SourceList," "Title," and "DestinationListColumn" accordingly.