Google custom search not refreshing its result on updating search query using js

Question

I have a textbox where I am entering user id present in my system. on submitting the id it will return me the name and address of the user and I am putting it in the search box of a gcse.

document.getElementById("gsc-i-id1").setAttribute("value", this.searchquery)
let btn1: HTMLElement = document.getElementsByClassName('gsc-search-button-v2')[0] as HTMLElement;
btn1.click()

Where this.searchquery is has value "test_user test_address".

It is working for the first time but if I enter some other user_id, in my text box, lets say user_id_2 and submit and then get this.searchquery to be of other value lets say "test_user2 test_address2", the search box of gcse still has "test_user test_address" instead of "test_user2 test_address2". Due to which I am getting same result over and over again.

Here is the code for setup:

this.gcseSearchBox = this.sanitizer.bypassSecurityTrustHtml("<gcse:searchbox gname='g1' ></gcse:search>");
this.gcseSearchResults = this.sanitizer.bypassSecurityTrustHtml("<gcse:searchresults gname='g1'></gcse:searchresults>");

let cx = '*****************';
let gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx='+cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse,s);

Here is the code in html:

<div class="google-media-search" [innerHTML]="gcseSearchBox" id="gcse1"></div>
<div class="google-media-search" [innerHTML]="gcseSearchResults"></div> 

I observed one thing, the value contains first result even if I am manually searching any other query.

This is the gsce html snippet:

<input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="search" id="gsc-i-id1" dir="ltr" spellcheck="false" style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; outline: none;" value="test_user test_address">

Here the value is not getting updated causing me a problem.

How an I achieve this?

Answer 1

Solved the issue by replacing setAttribute with .value.

(<HTMLInputElement>document.getElementById("gsc-i-id1")).value = this.searchquery1;
let btn1: HTMLElement = document.getElementsByClassName("gsc-search-button-v2")[0] as HTMLElement;
btn1.click()

The problem was in typescript typesafe operation.

I got the hint from https://stackoverflow.com/a/12990166/14229857