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