I have been working on creating a search functionality using Vanilla JavaScript. While the code works fine in the Browser's web console, I am facing issues with outputting the object once it is wrapped in the function.
The process involves having the user input a search term in an HTML form. The form then stores this value in a variable called _searchInput, which is saved in session storage. When I check session storage in the web console, it shows the stored variable with the expected value. However, upon trying to return the _results variable, it seems to be returning an empty array.
For clarification, the inputValue(); function is responsible for checking if the user has entered a value and then calling searchFunc(); if the search field is not empty.
The HTML Form:
<form name="entryForm">
<input id="searchInput" type="text" label="Search" onclick="this.value = '' " />
<button id="searchBtn" onclick="inputValue();">Search</button>
<p id="response">I'm the value</p>
</form><br><br>
The Object Array:
const allInvItems = [{
"ProdId": "1",
"InvItemName": "T-shirt",
"GinNum": "640041 - T-shirt",
"QtyServUnit": "1",
"QtyCountUnit": "1",
"PurchUnit": "EA - Each",
"CountUnit": "EA - Each",
"SellUnit": "EA - Each",
"CountFrequency": "D - Daily",
"StandCost": "10.6049"
},
{
"ProdId": "2",
"InvItemName": "Shorts",
"GinNum": "75043011 - Shorts",
"QtyServUnit": "8",
"QtyCountUnit": "1",
"PurchUnit": "PK - Pack",
"CountUnit": "EA - Each",
"SellUnit": "EA - Each",
"CountFrequency": "D - Daily",
"StandCost": "2.6049"
}];
The Search Function: Here is where I am facing difficulty:
function searchFunc() {
const storedInput = sessionStorage.getItem('_searchInput').value;
let _results = allInvItems.filter(function(obj) {
return obj.InvItemName == storedInput;
});
}
I am expecting the function to filter out all objects except the one stored in the variable captured.