Fire Event on change not firing the search - html

Question

In my online interface there is a client search. At the point when I embed PAN. Search motor discover the client with that PAN and I select something similar (When I select it every client has some extraordinary id at backend, it reflecting for half second). When I Select a similar it divert me to the page where full detail of client is there. I needed to divert there. However, codes are not supporting.
HTML Codes
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4" style="text-align: left;">
<div class="col-md-3" style="text-align: right !important;">
<label for="CLIENT_ID">CLIENTS: </label>
</div>
<div class="col-md-9">
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite">1 result is available, use up and down arrow keys to navigate.</span><input class="ui-autocomplete-input ui-autocomplete-loading" id="SEARCH_CLIENT_ID" style="width: 100% !important; color: rgb(51, 51, 51);" autocomplete="off">
<input id="hdnSEARCH_CLIENT_ID" type="hidden">
</div>
</div>
</div>
I have taken a stab at fallowing Codes
IE.Document.getElementById("SEARCH_CLIENT_ID").Focus
IE.Document.getElementById("SEARCH_CLIENT_ID").Value = "ACPPL3488C"
IE.Document.getElementById("SEARCH_CLIENT_ID").FireEvent ("onchange")
IE.Document.getElementById("SEARCH_CLIENT_ID").selectedIndex = 1
In any case, its not working for me. generously control me my misstep

Answer 1

Create change event using Event constructor and then dispatch the change event on target element using EventTarget.dispatchEvent() method.
const event = new Event('change');
const inputEle = document.getElementById("SEARCH_CLIENT_ID");
// Listen for the change event.
inputEle.addEventListener('change', function (e) {
console.log(e.target.value); // output: ACPPL3488C
}, false);
inputEle.focus();
inputEle.value = "ACPPL3488C";
// Dispatch the change event.
inputEle.dispatchEvent(event);
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4" style="text-align: left;">
<div class="col-md-3" style="text-align: right !important;">
<label for="CLIENT_ID">CLIENTS: </label>
</div>
<div class="col-md-9">
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite">1 result is available, use up and down arrow keys to navigate.</span><input class="ui-autocomplete-input ui-autocomplete-loading" id="SEARCH_CLIENT_ID" style="width: 100% !important; color: rgb(51, 51, 51);" autocomplete="off">
<input id="hdnSEARCH_CLIENT_ID" type="hidden">
</div>
</div>
</div>
Check MDN docs for more details.