Need help with creating a Typeahead search box on Custom Widget

[DPrasna]

Hello All,

I have a custom widget with rows and columns as below that displays list of users

HTML

<div class="container-fluid" style="background-color:#e6f7ff;">
<div class="panel panel-default" style="background-color:#none;border: none;">
<h3>
All Users
</h3>

<div class="panel-body">

<div class="row">
<div class="col-md-12 text-right">
<button type="button" class="btn btn-primary" style="font-size: 12px;">Active</button>
<button type="button" class="btn btn-default" style="font-size: 12px;">Inactive</button>
</div>
</div>

<table class="table table-striped">
<tr>
<th>User Name</th>
<th>Active</th>
<th>Locked out</th>
<th>Development</th>
<th>Production</th>
<th class="actions"></th>
</tr>
<tbody>
<tr ng-repeat="user in data.users">
<td>{{user.username}}</td>
<td>{{user.active}}</td>
<td>{{user.lockedout}}</td>
<td>{{user.devrole.join(', ')}}</td>
<td>{{user.prodrole.join(', ')}}</td>
<td>
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-secondary dropdown-toggle">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="javascript&colon;void(0);" ng-click="c.deactivateUser(user.sys_id)">Deactivate User</a></li>
<li><a href="javascript&colon;void(0);" ng-click="c.openUpdaterole(user)">Update User</a></li>
<!-- <li><a href="javascript&colon;void(0);">Third Link</a></li> -->
</ul>
</div> 
</td> 

</tr>
</tbody>
</table>  
</div>
</div>
</div>

I want a Typeahead search inside the container or below username column to allow users to search the name of the users that is displayed from the result returned from the server script

Reference image for expected column

TIA

@jaheerhattiwale @RaghavSh @Community Alums @Mike_R 

[DPrasna]

Hi,Yes @jaheerhattiwale  they are the server side and HTML I have currently

[jaheerhattiwale]

@DPrasna Update the script like below:

HTML:

<div class="container-fluid" style="background-color:#e6f7ff;">
<div class="panel panel-default" style="background-color:#none;border: none;">
<h3>
All Users
</h3>

<div class="panel-body">

<div class="row">
<div class="col-md-12 text-right">
<button type="button" class="btn btn-primary" style="font-size: 12px;">Active</button>
<button type="button" class="btn btn-default" style="font-size: 12px;">Inactive</button>
</div>
</div>

<table class="table table-striped">
<tr>
<th>User Name <div class="search-icon">
<input ng-model="c.keyword" type="text" placeholder="Search..">
<button type="button" ng-click="c.keywordSearch()"><i class="fa fa-search"></i></button>
</div></th>
<th>Active</th>
<th>Locked out</th>
<th>Development</th>
<th>Production</th>
<th class="actions"></th>
</tr>
<tbody>
<tr ng-repeat="user in data.users">
<td>{{user.username}}</td>
<td>{{user.active}}</td>
<td>{{user.lockedout}}</td>
<td>{{user.devrole.join(', ')}}</td>
<td>{{user.prodrole.join(', ')}}</td>
<td>
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-secondary dropdown-toggle">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="javascript&colon;void(0);" ng-click="c.deactivateUser(user.sys_id)">Deactivate User</a></li>
<li><a href="javascript&colon;void(0);" ng-click="c.openUpdaterole(user)">Update User</a></li>
<!-- <li><a href="javascript&colon;void(0);">Third Link</a></li> -->
</ul>
</div>
</td>

</tr>
</tbody>
</table>
</div>
</div>
</div>

CSS:

.search-icon{
display: flex;
flex-direction: row;
}

Client script:

api.controller=function() {
/* widget controller */
var c = this;

c.keywordSearch = function(){
c.data.action = "keyword_search";
c.data.keyword = c.keyword;
c.server.update();
}
};

Server Script:

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */

var grUserrel = new GlideRecord('cmdb_rel_person');
grUserrel.addQuery('ci','IN',Ci_id);
//grUserrel.addQuery('user.active','true');
if(input && input.action =="keyword_search"){
grUserrel.addQuery("user.user_nameLIKE"+input.keyword);
}
grUserrel.query();
while(grUserrel.next()){

var user = {};
user.username = grUserrel.getDisplayValue('user');
user.sys_id = grUserrel.getDisplayValue('user.sys_id');
user.active = grUserrel.getDisplayValue('user.active');
user.lockedout = grUserrel.getDisplayValue('user.locked_out');
user.environment1 = [grUserrel.getDisplayValue('ci.used_for')];
user.environment = grUserrel.getDisplayValue('ci.used_for');
}
})();

Please mark as correct answer if this solves your issue.

[DPrasna]

@jaheerhattiwale can you please help with the below one