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.

1 comment: