In SharePoint Online site, I have created Employees list, which contains all the emails.


I have created one more list in which I have created a single line of text field named Email in which autocomplete functionality is implemented.

On newitem.aspx, add a content editor Webpart and add the code snippet given below.

  1. <link rel="stylesheet" href="/sites/vijai/SiteAssets/autocomplete/jquery-ui.css"/>
  2. <script type="text/javascript" src="/sites/vijai/SiteAssets/autocomplete/jquery-ui.js"/>
  3. <script type="text/javascript" src="/sites/vijai/SiteAssets/autocomplete/jquery-1.11.0.min.js"/>
  4. <script type="text/javascript" src="/_layouts/15/init.js"></script>
  5. <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
  6. <script type="text/javascript" src="/_layouts/15/sp.js"></script>
  7. <script type="text/javascript">
  9. var clientContext;
  10. var website;
  11. var array = [];
  13. // Make sure the SharePoint script file 'sp.js' is loaded before your code runs.
  14. SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getAutoComplete);
  16. function getAutoComplete() {
  17. clientContext = SP.ClientContext.get_current();
  18. var oList = clientContext.get_web().get_lists().getByTitle("Employees");
  19. var camlQuery = new SP.CamlQuery();
  20. camlQuery.set_viewXml("<View><RowLimit>100</RowLimit></View>");
  21. collListItem = oList.getItems(camlQuery);
  22. clientContext.load(collListItem);
  23. clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);
  24. }
  26. function onRequestSucceeded() {
  27. var listItemInfo = "";
  28. var listItemEnumerator = collListItem.getEnumerator();
  29. while (listItemEnumerator.moveNext()) {
  30. var oListItem = listItemEnumerator.get_current();
  31. sArray.push(oListItem.get_item("Title"));
  32. }
  34. $("input[title='Email']").autocomplete({ source: array });
  35. }
  37. function onRequestFailed(sender, args) {
  38. alert('Error: ' + args.get_message());
  39. }
  41. </script>

Result

Reference

https://jqueryui.com/autocomplete/

Summary

In this blog, you have seen how to implement textbox autocomplete functionality, using jQuery in SharePoint Online.