I am facing a challenge with implementing search functionality in a table that has multiple dynamic columns with a horizontal scrollbar. The goal is for users to be able to search for a specific column name or data, and if a match is found, the scrollbar should automatically scroll to that particular column.
While I have attempted to implement this feature, I have been unable to find a solution without using any third-party libraries or tools. Ideally, I would like to achieve a similar functionality to what is seen in the Google Chrome browser, where searching directs the user to the relevant column, but without relying on browser-search or external tools.
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.personalDetails = [
{
'fname':'Abc',
'lname':'Abc',
'email':'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89c8ebeac9c8ebeaa7eae6e4">[email protected]</a>',
'demo': 'xyz.com',
'Pnumber': '9892XXXXXX',
'Address': 'XYZ'
}
];
}]);.btn-primary{
margin-right: 10px;
}
.container,.search{
margin: 20px 0;
}
form{
width: 200px;
overflow-y: hidden;
overflow-x: scroll;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myapp" ng-controller="ListController">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class='search'>
<input type="search" placeholder="search column" required/>
</div>
<form>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>demo</th>
<th>Phone number</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>
<input type="checkbox" ng-model="personalDetail.selected"/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.fname" required/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.lname" required/></td>
<td>
<input type="email" class="form-control" ng-model="personalDetail.email" required/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.demo" required/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.Pnumber" required/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.Address" required/></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</body>