0

I found a method how to add an autocomplete function to a simple textbox by using the following code:

<script language="javascript" src="/JS/jquery-1.6.2.min.js"
type="text/javascript"></script>
<script language="javascript" src="/JS/jquery.SPServices-0.7.2.min.js"
type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $().SPServices.SPAutocomplete({
            sourceList: "SupportListName",
            sourceColumn: "SupportColumnName",
            columnName: "TargetColumnName",
            ignoreCase: true,
            numChars: 2,
            slideDownSpeed: 'fast'
        });
    });</script>

What I did:

  1. I created 2 list. List "A" have a text column to support the autocomplete function. List "B" have a simple textfield what should be autocomplete when the user start to write.

  2. I went to the input display of the "B" target list (New item).

  3. I added script editor web part from "Media and content".

  4. I copyed the script from the link.

  5. Modyfied the names of the lists.

Result: When I save the script editor I can see an error message for a sec: "AsyncDeltaManager.ParseErrorExeption: The messege recived from the server could not be parsed". And nothing happens. I am new to both Jquery and Sharepoint so it can be even a trivial mistake. Also the guide was for SP 2010 and I am using 2013.

Thank you very much for any suggestion!

  • Looks like SPServices.SPAutocomplete is not working in SP 2013 I tried most of the popular examples on my side and no worked :( we need confirmation from @Marc D Anderson – Mohamed El-Qassas MVP Sep 15 '17 at 23:23
  • I have implemented this and it works fine. But it gives the suggestions that starts with the input, I want it to show the suggestions that contains the text input. For example, If I type 'a', it should show the names that contain 'a' but not the ones that start with 'a'. Please suggest the modification to be done in the above code. Thanks sandhya v – sandhya v Nov 21 '17 at 11:37
1

Have just tried this code in SharePoint 2013 on-premises on a list's NewForm.aspx and it worked. This should work in SharePoint O365 as well. The solution is to use correct jquery and spservices js files.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $().SPServices.SPAutocomplete({
            sourceList: "ListA",
            sourceColumn: "Title",
            columnName: "Title",
            ignoreCase: true,
            numChars: 2,
            slideDownSpeed: 'fast'
        });
    });
</script>

See output below

enter image description here

  • Thank you very much! Sounds cool. May I ask you to explain how can I configurate the jquery and spservices js correctly? I tryed your script, but still not works. Or if it sould works for me too, than it may be my company's SP 2013 installation problem. (For example 2013 workflows not works here too) – Nefri Sep 18 '17 at 8:39
  • @Nefri, please open the page in Chrome and use Inspect (Right-Click) then go to Network tab and see if there are any js load errors. It appears that jquery or spservices js files are not loading on your page. – Ahmad Zia Sep 18 '17 at 12:08
  • I have 2 warning, but not errors. 1. "window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead" 2. "webkitIndexedDB' is deprecated and will be removed in M57, around March 2017. Please use 'indexedDB' instead" Both related to AsyncDeltaManager$_navigate and AsyncDeltaManager$_retrieveDelta, but I am not sure what does these mean. – Nefri Sep 18 '17 at 12:48
  • @Nefri, now you need to go one step back to make sure jquery and spservices work. Add a new web part page and add a content editor web part. Paste this code in the web part. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">$(document).ready(function () { alert(1234);});</script>. Do same for SPServices. Use the simple method alert($().SPServices.Version()). Check for any errors in console and network tabs in Chrome Inspect window – Ahmad Zia Sep 18 '17 at 23:20
  • If I add any of these code I get an error: "The XSS Auditor refused to execute a script in 'path.aspx?…ew=Shared&InitialTabId=Ribbon.WebPartPage&VisibilityContext=WSSWebPartPage' because its source code was found within the request. The auditor was enabled as the server did not send an 'X-XSS-Protection' header." But if I go to an other list and come back to this one, the error is gone and only that 2 warning is here what I described earlier. Do u have any suggestion what can be the problem? And thank you very much for keep helping me! – Nefri Sep 19 '17 at 7:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.