如何让脚本与网页中的特定HTML元素进行交互？

Question

我尝试创建一个自定义选择下拉菜单，当用户在输入框中输入文字时会给出建议。

这是我试图提取javascript代码的网站：http://www.redbus.in/

以下是选择下拉列表：

我尝试通过开发工具访问相应输入框的事件监听器，但无法获取相关脚本。

在这种情况下如何获得相应的脚本？是否有任何技巧/特定方法可以让脚本与特定的HTML元素进行交互？

PS：我是网络开发的初学者。

Answer 1

在Chrome中右键单击redbus.in页面中的元素，然后选择＆＃34; Inspect element＆＃34;这将带来选择该元素的开发工具。

现在在＆＃34; Sources＆＃34;选项卡转到＆＃34;事件监听器＆＃34;开发工具右上角的第3个。选择过滤器图标，然后选择＆＃34;仅选择节点＆＃34; （见截图）：

现在查看＆＃34; keyup＆＃34;部分并单击脚本。然后使用＆＃34; {}＆＃34;美化代码。

如果缩小的代码太多而无法破解。然后我建议使用twitter typeahead jQuery插件。

您可以将此插件应用于任何输入类型=＆＃34; text＆＃34;在您的网站上这样：

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

我已经创建了一个plunk here。代码很容易实现。

我希望这会有所帮助：）

Answer 2

在Chrome浏览器DevTools第三个面板附近＆＃39; Computed＆＃39;被称为“事件听众”＃39;您可以看到该节点上设置的所有事件和来源：id =＆＃34; txtSource＆＃34;