I've been working on integrating a search feature and I'm having an issue with the functionality. Below is the code snippets for both HTML and JS:
HTML
<form>
<input type="text" ng-model="searchVar" class="searchbox">
<input type="button" value="Search" ng-click="Search()" class="button">;
</form>
JS
var Search = function() {
// Code to load table content
// The following snippet filters out table contents based on user input in the text field
if (($scope.searchVar) && (tableContent[i].indexOf($scope.searchVar) !== -1)) {
ItemsToDisplay.push(tableContent[i])
}
// Call function to load table
}
Whenever I enter a search query in the text field, the search algorithm functions correctly and displays relevant items. However, when I clear the text field and click the Search button, the table remains empty. It seems like the ItemsToDisplay array is empty when the text field is cleared and the button is clicked, causing the if condition to fail.
I'm seeking assistance in understanding why this is happening and how I can resolve it. Any insights would be greatly appreciated!