How to add autocomplete functionality for sharepoint custom list editor text field

Question

I am new to SharePoint and I created a custom list view and when I edit or add any new record, I want a textfield to have text autocomplete functionality. but I'm not able to do so, Can you please help me out with this.

Edit: the autocomplete data I want to show is coming from SQL Server SP.

Answer 1

Please take a reference to this demo: Textbox AutoComplete Using JQuery In SharePoint Online.

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

You can inject above JS code to SharePoint Online using SharePoint Framework(SPFx).