第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

Javascript自動(dòng)完成下拉功能混淆

Javascript自動(dòng)完成下拉功能混淆

慕標(biāo)琳琳 2021-07-13 13:09:09
我正在使用這個(gè)W3C Schools 自動(dòng)完成下拉菜單。function autocomplete(inp, arr) {  /*the autocomplete function takes two arguments,  the text field element and an array of possible autocompleted values:*/  var currentFocus;  /*execute a function when someone writes in the text field:*/  inp.addEventListener("input", function(e) {      var a, b, i, val = this.value;      /*close any already open lists of autocompleted values*/      closeAllLists();      if (!val) { return false;}      currentFocus = -1;      /*create a DIV element that will contain the items (values):*/      a = document.createElement("DIV");      a.setAttribute("id", this.id + "autocomplete-list");      a.setAttribute("class", "autocomplete-items");      /*append the DIV element as a child of the autocomplete container:*/      this.parentNode.appendChild(a);      /*for each item in the array...*/      for (i = 0; i < arr.length; i++) {        /*check if the item starts with the same letters as the text field value:*/        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {          /*create a DIV element for each matching element:*/          b = document.createElement("DIV");          /*make the matching letters bold:*/          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";          b.innerHTML += arr[i].substr(val.length);          /*insert a input field that will hold the current array item's value:*/          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";          });          a.appendChild(b);        }      }  });我對(duì)這個(gè)自動(dòng)完成功能中的這行代碼感到困惑:inp.value = this.getElementsByTagName("input")[0].value;this上面的代碼指的是什么?我們?yōu)槭裁匆@樣做this.getElementsByTagName("input")[0]?我正進(jìn)入(狀態(tài):未捕獲的類型錯(cuò)誤:無法讀取未定義的屬性“值”在這一行。然而,我確實(shí)修改了上面的函數(shù)并刪除了inp參數(shù)上的添加事件偵聽器行。
查看完整描述

3 回答

?
慕慕森

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超17個(gè)贊

讓我們一步一步地打破這個(gè)問題。

  1. 您沒有從 w3school 復(fù)制完整的腳本,請(qǐng)復(fù)制它,因?yàn)榕c上述代碼相關(guān)的“addEventListener”、“addActive”等函數(shù)很少。

  2. inp.value = this.getElementsByTagName("input")[0].value; 這里this指的是文檔(window.document)

  3. this.getElementsByTagName("input")[0] 如果我們不寫它,我們將得到未定義,因?yàn)樵谶@里您將搜索的項(xiàng)目分配給搜索輸入框中的第一個(gè)元素。


查看完整回答
反對(duì) 回復(fù) 2021-07-15
?
慕婉清6462132

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è)置為文本框值。


查看完整回答
反對(duì) 回復(fù) 2021-07-15
?
四季花海

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


查看完整回答
反對(duì) 回復(fù) 2021-07-15
  • 3 回答
  • 0 關(guān)注
  • 217 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)