Saturday, February 24, 2018

JQuery Autocomplete in SharePoint using REST

JQuery Autocomplete in SharePoint using REST.
1. Create a SharePoint 'Employee' List
2. Create a script file and save in site assets
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Auto Populate Demo</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
* html .ui-autocomplete {
    height: 200px !important;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
    console.log("on document ready");
    AutoPopulateEmployee();
});
function AutoPopulateEmployee() {
    $("#txtEmployee").autocomplete({
        source: function( request, response ) {
            $.ajax({             
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Employees')/items?$filter=substringof('"+request.term+"',Title)&$top=100&$select=Title,Address"
                type: "GET",
                headers:
                    Accept: "application/json;odata=verbose" 
                }, 
                async: false,
                cache: false,
                beforeSend: function(){     
                    console.log("beforeSend");              
                },
                success: function (data, status, xhr) {
                    arrayEmployee = [];
                    for(i =0; i<data.d.results.length; i++) {         
                        arrayEmployee.push(data.d.results[i]["Title"] + ", " + data.d.results[i]["Address"]);               
                    }
                    arrayEmployee=$.unique(arrayEmployee);
                    response(arrayEmployee);
                    console.log("success");         
                }, 
                error: function (xhr, status, error) {                      
                    console.log("error: "+ xhr.responseText); 
                },
                complete: function(){
                    console.log("complete");
                }
            });
          },
          minLength: 2
        });
    }   
</script>
</head>
<body>
Select Employee: <input type="text" id="txtEmployee"></input>
</body>
</html>

 Save the above code in Site Assets.
3. Add content editor webpart in a page and refer above script url.
4. Test the code.

3 comments:

  1. hi we are getting autocomplete is not function erorr

    ReplyDelete
  2. Awesome article, it was exceptionally helpful! I simply began in this and I'm becoming more acquainted with it better! Cheers, keep doing awesome! visit the website

    ReplyDelete
  3. Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! maps.lol/trader-joes-us-or-14519

    ReplyDelete

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts