使用javascript在HTML SELECT OPTION中突出显示“text”的子字符串

Question

我有html-select在运行时填充 即，当我在html输入文本框中输入内容时，我会在下面附加的html-dropdown-listbox中显示基于子字符串的结果。

现在我只想强调html下拉列表框中与html输入文本框中的字符串匹配的项目的子字符串。

e.g。 如果我在html输入文本框中键入“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方式：

• 使用font-family: monospace获取相等宽度的字符。
• 使用background-image获取可调背景。
• 使用background-position在ch中设置突出显示背景的起始位置。
• 使用background-size设置ch中突出显示背景的长度。

限制：

• 仅适用于基于Gecko的浏览器。
• select中的突出显示也需要额外调整。 （我用text-indent做了，鼓励找到更好的解决方案。）

我在jsFiddle上放了一个simple demo。