Google 自定义搜索在使用 js 更新搜索查询时不会刷新其结果

如何解决Google 自定义搜索在使用 js 更新搜索查询时不会刷新其结果

我有一个文本框，用于输入系统中存在的用户 ID。提交 ID 后，它会返回用户的姓名和地址，我将其放入 gcse 的搜索框中。

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

this.searchquery 的值是“test_user test_address”。

这是第一次工作，但如果我在我的文本框中输入一些其他 user_id，让我们说 user_id_2 并提交，然后让 this.searchquery 成为其他值让说“test_user2 test_address2”，搜索框gcse 仍然有“test_user test_address”而不是“test_user2 test_address2”。因此，我一遍又一遍地得到相同的结果。

这是设置代码：

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);

这是html中的代码：

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

我观察到一件事，即使我手动搜索任何其他查询，该值也包含第一个结果。

这是 gsce html 片段：

<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">

这里的值没有更新导致我出现问题。

我是如何做到这一点的？

解决方法

通过将 setAttribute 替换为 .value 解决了该问题。

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

问题出在 typescript 类型安全操作中。

我从https://stackoverflow.com/a/12990166/14229857

那里得到了提示