问题描述
我有一个文本框,用于输入系统中存在的用户 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 类型安全操作中。
那里得到了提示