如何使脚本与网页中的特定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”