3 回答

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超17個(gè)贊
讓我們一步一步地打破這個(gè)問題。
您沒有從 w3school 復(fù)制完整的腳本,請(qǐng)復(fù)制它,因?yàn)榕c上述代碼相關(guān)的“addEventListener”、“addActive”等函數(shù)很少。
inp.value = this.getElementsByTagName("input")[0].value;
這里this
指的是文檔(window.document)this.getElementsByTagName("input")[0]
如果我們不寫它,我們將得到未定義,因?yàn)樵谶@里您將搜索的項(xiàng)目分配給搜索輸入框中的第一個(gè)元素。

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超2個(gè)贊
如果您可以看到代碼,您會(huì)發(fā)現(xiàn)當(dāng)用戶開始在輸入字段上輸入時(shí),會(huì)出現(xiàn)一個(gè)包含建議的列表。當(dāng)用戶單擊任何建議選項(xiàng)時(shí),該值被設(shè)置為文本框。
所以在這里,在建議列表中,選項(xiàng)是這樣生成的
<div>
<strong>A</strong>
fghanistan
<input type="hidden" value="Afghanistan">
</div>
我們?cè)谶@個(gè) div 元素上點(diǎn)擊了監(jiān)聽器,你可以在它下面找到這個(gè)代碼
this.getElementsByTagName 返回具有給定標(biāo)簽名稱的元素的集合
碼this.getElementsByTagName("input")[0]與標(biāo)簽名稱搜索元件input下this(這是當(dāng)前的div)。
[0]這是在返回的集合中的第一個(gè)查找,因此它找到具有 value 的輸入元素Afganistan。哪個(gè)被設(shè)置為文本框值。

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊
正如您在下面的代碼段中看到的,this關(guān)鍵字引用(內(nèi)部處理程序)到輸入元素本身。代碼的作者使用this.getElementsByTagName("input")[0](但不清楚為什么以這種方式)可能是因?yàn)樗霃钠渌斎霃?fù)制值 - 但是您可以在不使用它的情況下設(shè)置該值(例如直接方式inp.value='some autocompleted vale',取決于您的情況)
inp.addEventListener("input", function(e) {
console.log(this.value, this);
})
<input id="inp" placeholder='type here'>
添加回答
舉報(bào)