Resource Name search on Project Online Resource Center PDP in Project Online Hi Team,
It am trying to develop a JavaScript script to enable resource name search on Project Online Resource Center, but it's not filtering the resources as expected
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
url: "<ProjectOnineURL>/_api/ProjectData/Resources",
type: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function (data) {
var resources = data.d.results;
var resourceNames = resources.map(function(resource) {
return resource.Name;
});
$("#resourceSearch").autocomplete({
source: resourceNames,
minLength: 1,
select: function (event, ui) {
filterWebPart(ui.item.value);
}
});
},
error: function (error) {
console.log("Error fetching resource names: " + JSON.stringify(error));
}
});
function filterWebPart(resourceName) {
try {
var webPart = document.getElementById('WebPartWPQ4');
if (webPart) {
webPart.set_filter(resourceName);
webPart.applyFilter();
} else {
console.log("Web part not found.");
}
} catch (error) {
console.log("Error filtering web part: " + error);
}
}
});
</script>
</head>
<body>
<label for="resourceSearch">Search Resource:</label>
<input type="text" id="resourceSearch">
</body>
</html>">
What I have tried:
<pre><!DOCTYPE html>
<html>
<head>
<title>Resource Name Filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
url: "<ProjectOnineURL>/_api/ProjectData/Resources",
type: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function (data) {
var resources = data.d.results;
var resourceNames = resources.map(function(resource) {
return resource.Name;
});
$("#resourceSearch").autocomplete({
source: resourceNames,
minLength: 1,
select: function (event, ui) {
filterWebPart(ui.item.value);
}
});
},
error: function (error) {
console.log("Error fetching resource names: " + JSON.stringify(error));
}
});
function filterWebPart(resourceName) {
try {
var webPart = document.getElementById('WebPartWPQ4');
if (webPart) {
webPart.set_filter(resourceName);
webPart.applyFilter();
} else {
console.log("Web part not found.");
}
} catch (error) {
console.log("Error filtering web part: " + error);
}
}
});
</script>
</head>
<body>
<label for="resourceSearch">Search Resource:</label>
<input type="text" id="resourceSearch">
</body>
</html>