如何使腳本與網頁中的特定HTML元素進行交互？

Question

我正在嘗試創建一個自定義的選擇下拉菜單，當用戶在輸入框中輸入文本時會給出建議。

這是我嘗試從中提取javascript代碼的站點： http : //www.redbus.in/

這是select下拉菜單在起作用：

我嘗試通過開發工具訪問相應輸入框的事件偵聽器，但無法獲取相關腳本。

在這種情況下，如何獲得相應的腳本？ 是否有任何技巧/特定方法來使腳本與特定的HTML元素進行交互？

PS：我是Web開發的初學者。

Answer 1

在Chrome中，右鍵單擊redbus.in頁面中的元素，然后選擇“檢查元素”，這將顯示選中該元素的開發工具。

現在，在“源”選項卡下，進入開發工具右上角的“事件監聽器”第3個位置。 選擇過濾器圖標，然后選擇“僅選定節點”（請參見屏幕截圖）：

現在，在“ keyup”部分中查找並單擊腳本。 然后使用“ {}”美化代碼。

如果縮小的代碼太多，就無法破解。 然后，我建議使用Twitter預先輸入jQuery插件。

您可以將此插件應用於您網站上的任何輸入type =“ text”，如下所示：

$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  displayKey: 'value',
  source: substringMatcher(states)
});

我在這里制造了一顆小東西 。 該代碼非常易於實現。

我希望這有幫助 ：）

Answer 2

在Chrome DevTools中，“計算”附近的第3個面板稱為“事件監聽器”。 您可以看到在該節點上設置的所有事件和源：id =“ txtSource”