AngularJS : why is searching not working properly? - angularjs

Question

I am trying to search text on table using angular ..I am able to search text in table .But my search works when I press enter or “search button” .Example when I write “Active” it not show the result but when I press enter or press search button it show the output .can we do the like search like autocomplete .Example when I press “a’ it show all item which start from “a” .Then if user write “ac” then show “ac” value ..same like that .when user write “active “ it show rows which have “active” without using search button or enter .can we make add filter so that it works properly ?
here is my code
$scope.searchInvoices = function(evt, queryval) {
$scope.haveNorecordFound = true;
if (typeof queryval != "undefined" && queryval.length === 0 || evt.keyCode === 13 || evt.type === 'click') {
if (typeof queryval == "undefined" || queryval.length === 0) {
console.log("if===")
isfilterOccured = false;
$scope.tasklist_records = $scope.total_tasklist_records;
$scope.totalNumberOfrecord = $scope.tasklist_records.length + " records found."
} else {
console.log("esle===")
var recordset = $scope.serachObject;
results = [];
var recordsetLength = recordset.length;
var searchVal = queryval.toLowerCase();
var i, j;
for (i = 0; i < recordsetLength; i++) {
var record = recordset[i].columns;
for (j = 0; j < record.length; j++) {
if (record[j].value != null) {
var invoice = record[j].value.toLowerCase();
if (invoice.indexOf(searchVal) >= 0) {
results.push(recordset[i]);
}
}
}
}
var nameOrPathValues = results.map(function(o) {
var result = {};
o.columns.forEach(function(c) {
result[c.fieldNameOrPath] = c.value;
});
return result;
});
console.log("serach");
console.log(nameOrPathValues);
var objectarray = nameOrPathValues.map(function(o) {
var result = {};
collectNameOrPath.forEach(function(name) {
result[name] = o[name];
});
return result;
});
isfilterOccured = true;
$scope.tasklist_records = objectarray;
if ($scope.tasklist_records.length == 0) {
$scope.haveNorecordFound = false;
} else {
$scope.totalNumberOfrecord = $scope.tasklist_records.length + " records found."
}
}
}
};

Answer 1

After debugging in code, I found that you're biding function on either enter button press or search click. That's why it was not working on ng-keyup. Please replace your function from below code.
$scope.searchInvoices = function(evt, queryval) {
console.log(queryval)
$scope.haveNorecordFound = true;
var recordset = $scope.serachObject;
results = [];
var recordsetLength = recordset.length;
var searchVal = queryval.toLowerCase();
var i, j;
for (i = 0; i < recordsetLength; i++) {
var record = recordset[i].columns;
for (j = 0; j < record.length; j++) {
if (record[j].value != null) {
var invoice = record[j].value.toLowerCase();
if (invoice.indexOf(searchVal) >= 0) {
results.push(recordset[i]);
}
}
}
}
var nameOrPathValues = results.map(function(o) {
var result = {};
o.columns.forEach(function(c) {
result[c.fieldNameOrPath] = c.value;
});
return result;
});
console.log("serach");
console.log(nameOrPathValues);
var objectarray = nameOrPathValues.map(function(o) {
var result = {};
collectNameOrPath.forEach(function(name) {
result[name] = o[name];
});
return result;
});
isfilterOccured = true;
$scope.tasklist_records = objectarray;
if ($scope.tasklist_records.length == 0) {
$scope.haveNorecordFound = false;
} else {
$scope.totalNumberOfrecord = $scope.tasklist_records.length + " records found."
}
};