Post
Ask Question

Textbox AutoComplete Using JQuery In SharePoint Online

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">  
  8.   
  9.     var clientContext;  
  10.     var website;  
  11.     var array = [];  
  12.   
  13.     // Make sure the SharePoint script file 'sp.js' is loaded before your code runs.  
  14.     SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getAutoComplete);  
  15.   
  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.     }  
  25.   
  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.         }  
  33.   
  34.         $("input[title='Email']").autocomplete({ source: array });  
  35.     }  
  36.   
  37.     function onRequestFailed(sender, args) {  
  38.         alert('Error: ' + args.get_message());  
  39.     }  
  40.       
  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.