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

Question

我有一个文本框，我可以在其中输入系统中存在的用户 ID。在提交 id 时，它将 return 告诉我用户的姓名和地址，我将其放入 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 [=36” =]2"。因此，我一遍又一遍地得到相同的结果。

这里是设置代码：

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

这里的值没有更新导致我遇到问题。

我如何做到这一点？

Answer 1

通过将 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 类型安全操作中。

我从

得到提示

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

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

javascript

jquery

angular

google-custom-search

google-search-api