JQuery Autocomplete in SharePoint using REST.
1. Create a SharePoint 'Employee' List
2. Create a script file and save in site assets
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. Create a SharePoint 'Employee' List
<!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>
hi we are getting autocomplete is not function erorr
ReplyDeleteTook 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