使用javascript在HTML选择选项中突出显示"text“的子字符串

Question

我有一个在运行时填充的html-select。

也就是说，当我在html输入文本框中输入内容时，我会在下面附加的html-dropdown-listbox中显示基于子串的结果。

现在我只想突出显示html下拉列表框中与html-input textbox中的字符串匹配的项目的子字符串。

例如，如果我在html-input文本框中输入"ample“，那么它应该突出显示"ample”<OPTION value=723.1> S*ample* Text </OPTION>。

我已经尝试修改该html-dropdown-listbox的innerHTML属性。我想用javascript来做这件事。

Answer 1

不能设置SELECT内部元素的样式。它是由操作系统呈现的，而不是HTML。

Answer 2

尝试这种方法

<p id="textindrop">this is the text in the dropbox</p>
<a href="#" onClick="highlightsubstring('textindrop'); return false;">tohighlight</a>
<script type="text/javascript">
function highlightsubstring(el) {
var theText = document.getElementById(el).innerHTML;
theText = theText.replace(/(web)/gi, "<b>$1</b>");
document.getElementById(el).innerHTML = theText;
}
</script>

试试这个，看看这对你有帮助，把你的一些逻辑也放进去。为此，您也可以使用正则表达式。阅读javascript中的正则表达式

Answer 3

有一种CSS3方式：

在characters.

• Use中使用
• 来获得等宽characters.
• Use background-position来设置ch.
• Use中突出显示背景的起始位置来设置ch.

中突出显示背景的长度来设置ch.

中突出显示背景的长度

限制：

在select中，

• 只适用于基于壁虎的browsers.
• Highlighting，也需要额外的调整。(我是用encouraged.)

找到更好的解决方案的text-indent做的

我在jsFiddle上做了一个simple demo。