Twitter的Typeahead - 调试渲染的HTML？

Question

我在调试 Twitter 的 Typeahead 脚本时遇到了问题。出现了以下标题正常显示的情况...

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

但是，当我将H3替换为以下的div时...

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

我看到了空白区域。我知道某些东西正在渲染，但是文字没有显示出来。我感觉这可能是CSS问题，但是我无法在开发者工具中查看下拉菜单的渲染HTML。下拉菜单在我打算在源代码中导航到它之前就自动关闭了。

有人知道如何防止它打开后立即关闭吗？我使用的是Chrome的开发者工具。

- Adam Youngers

---

可能是以编程方式触发typeahead.js结果显示的重复问题。 - HaNdTriX

Answer 1

如果你使用的是Chrome开发者工具，你可以在元素选项卡中右键单击class="tt-dataset-0"元素，并选择"break on.../subtree modification"，然后在typeahead输入框中开始打字。调试器将会停止。现在，您可以右键单击要检查的元素。

- marco_

---

谢谢！在我看来，这是一个比被接受的答案更简单的解决方案。 - Andrew

谢谢，这种方式确实是最快的方式 :D - Dan

Answer 2

我以前从未使用过Typeahead，但我查看了他们的文档和演示页面。看起来有点棘手。

无论如何，用这个简单的脚本让它在你的浏览器控制台中粘贴后工作，强制你的Typeahead搜索框打开，并在你在元素检查器中探索时保持打开状态：

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

至少在Chrome中，右键单击“检查元素”时，建议框甚至仍然保持打开状态。

更新：原帖作者要求更详细的解释：

上面的代码是jQuery代码，它使用了一个选择器——包含Typeahead的元素。以下是一张截图：

此示例中的选择器是特定于Typeahead库演示页面的。您可能需要根据自己初始化Typeahead的方式进行调整。

- Marcus Olsson

---

我不太明白，请您提供更详细的步骤好吗？ - Adam Youngers

我已经更新了我的回答 - 如果有任何不正常的地方，请您更具体说明，我们会确保帮您解决这个问题 =) - Marcus Olsson

班级更改为 tt-input，因此我使用了 jQuery('.tt-input').focus().typeahead('val', '').focus().typeahead('val', 'banana');。 - brauliobo

感谢您详细、深思熟虑的回答！ - Andrew

我甚至无法使用调试器，下拉菜单会关闭@Marcus？？？ http://stackoverflow.com/questions/29789767/keep-twitter-typeahead-suggestion-dropdown-open - Sahan