Twitter's Typeahead - Debug Rendered HTML?

Question

I'm having problems debugging Twitter's Typeahead script. For some reason the following header displays fine...

header: '<h3 class="tt-title">Ads</h3>',

But when I swap out the H3 for divs as follows...

header: '<div class="tt-title">Ads</div>',

I get blank spaces. I know something is rendering, but the text is now showing up. I have a feeling it is a CSS issue, but I can't view the rendered HTML of the drop down in developer tools. The drop down closes automatically before I have a chance to navigate to it in the source.

Anyone know how to prevent it from closing once opened? I'm using Chrome's developer tools.

Answer 1

I've never used Typeahead before, but I checked their docs and their demo-page. And it sure was kind of tricky.

Anyhow, got it to work with this simple script that you can paste in your browser console, which forces you Typeahead searchbox to open, and stay open while you poke around in the element inspector:

$('.typeahead').focus().typeahead('val', '').focus().typeahead('val', 'what ever value you want to test');

At least in chrome, the suggestion box even stays open on right click > inspect element.

Update; the OP asked for an more extensive explanation:

The code above is jQuery and takes a selector – the element that contains the Typeahead. A screenshot:

The selector in this example is specific for the demo-pages for the Typeahead library. You might need to tweak it depending on how you initialize your own Typeahead.

Answer 2

If you are using chrome developer tools you can simply right click on the element class="tt-dataset-0" in your elements tab and choose break on.../subtree modification. If you start typing in the typeahead input field the debugger will break. Now you can right click on the element you wish to inspect.