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

Question

I'm trying to create a customized select drop down menu where suggestions are given when a user enters text in an input box.

This is the site from where I'm trying to extract the javascript code: http://www.redbus.in/

Here's the select drop down working in action:

I tried accessing the event listener for the corresponding input box through dev tools, but was unable to get the relevant script.

How can I get the corresponding script in this case? Are there any tricks/specific methods to get the script interacting with a particular HTML element?

PS: I'm a beginner in web development.

Answer 1

In Chrome right click the element in the redbus.in page and select "Inspect element" this will bring up dev tools with that element selected.

Now under the "Sources" tab go to the "event listeners" 3rd along top-right of dev tools. Select the filter icon and choose "selected node only" (see screenshot):

Now look in the "keyup" section and click on the script. Then use the "{}" to beautify the code.

If the minified code is too much to crack. Then I would suggest using the twitter typeahead jQuery plugin.

You can apply this plugin to any input type="text" on your site like this:

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

I have have created a plunk here . The code is very easy to implement.

I hope this helps :)

Answer 2

IN Chrome DevTools the 3rd panel near 'Computed' is called 'Event Listeners'. You can see there all events and sources set on that node: id="txtSource"