Textbox AutoComplete Using JQuery In SharePoint Online

In this blog, you will see how to implement textbox autocomplete functionality, 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.

<link rel="stylesheet" href="/sites/vijai/SiteAssets/autocomplete/jquery-ui.css"/>
<script type="text/javascript" src="/sites/vijai/SiteAssets/autocomplete/jquery-ui.js"/>
<script type="text/javascript" src="/sites/vijai/SiteAssets/autocomplete/jquery-1.11.0.min.js"/>
<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript">

    var clientContext;
    var website;
    var array = [];

    // Make sure the SharePoint script file 'sp.js' is loaded before your code runs.
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getAutoComplete);

    function getAutoComplete() {
        clientContext = SP.ClientContext.get_current();
        var oList = clientContext.get_web().get_lists().getByTitle("Employees");
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml("<View><RowLimit>100</RowLimit></View>");
        collListItem = oList.getItems(camlQuery);
        clientContext.load(collListItem);
        clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);
    }

    function onRequestSucceeded() {
        var listItemInfo = "";
        var listItemEnumerator = collListItem.getEnumerator();
        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();
            sArray.push(oListItem.get_item("Title"));
        }

        $("input[title='Email']").autocomplete({ source: array });
    }

    function onRequestFailed(sender, args) {
        alert('Error: ' + args.get_message());
    }

</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.