在 bootstrap typeahead 中使用 HTML - 如何清理文本输入框的 html答案

【问题标题】：Using HTML in bootstrap typeahead - how to cleanup html for text input box在 bootstrap typeahead 中使用 HTML - 如何清理文本输入框的 html
【发布时间】：2014-12-02 13:35:41
【问题描述】：

我需要在引导输入框中使用 HTML，以允许我缩进项目。

要得到这样的东西：

顶级项目
缩进项目
下一项（未缩进）

我通过将 HTML 放入预先输入的数据源中来实现这一点，如下所示：

var ajaxData = {json: JSON.stringify(["Top-Level-Item<br />&nbsp;&nbsp&nbsp;Indented Item","Next Item (Unindented)"])};

这在您获得的预先输入的“下拉样式”框中工作正常，但是当单击包含 HTML 的结果时，带有可读 HTML 标记的结果将被放入文本输入元素中。

请参阅下面的 JSFiddle，它显示了我的意思（开始输入“Alabama”以查看其中包含 HTML 的结果）：http://jsfiddle.net/mc0oocj4/

解决此问题的最佳方法是什么？我正在考虑在更新文本框之前清理 HTML，但我不知道如何实现这一点（文本框的更新是由引导内部厨房发生的，我不想搞砸......）

欢迎提供其他/更好的想法！

【问题讨论】：

标签： javascript html twitter-bootstrap

【解决方案1】：

你可以这样做

$('.typeahead').on('change', function (e) {
     this.value = this.value.replace(/<(?:.|\n)*?>/gm, '').replace(/&nbsp;/gm,'');
});

工作小提琴 http://jsfiddle.net/mc0oocj4/3/

【讨论】：

谢谢！我实际上是这样想的，但我认为.on('change') 代码也会在文本框中正常输入并弄乱用户输入时被触发，当然现在我看到只有当用户在框中输入 HTML 时这才是正确的，在这种情况下，这实际上是一件好事。
您是否在输入 html 代码的字符（如 nbsp 中的 n）时看到下拉列表中的 html 文本？