javascript - 根据onKeyUp函数中的输入控件值填充ListBox

Question

我有一个 ListBox 控件

 <asp:ListBox ID="ListBox1" runat="server">
                            <asp:ListItem Value="1" Text="XYZ" />
                            <asp:ListItem Value="0" Text="XYZD" />
                            <asp:ListItem Value="-1" Text="D" />
 </asp:ListBox>

输入：

<input id="listBoxFilterTextBox" type="text" onkeyup="FilterListBox()"

js函数：

 function FilterListBox() {
        var listBox = Get('ListBox1');
        var textBox = Get('listBoxFilterTextBox');

        for (i = 0; i < listBox.options.length; i++) {
            if (listBox.options[i].text.toLowerCase().indexOf(textBox.value.toLowerCase()) != -1) {
                listBox.options[i].style.display = "";
            } else {
                listBox.options[i].style.display = "none";
            }
        }

         function Get(id) {
        return document.getElementById(id);
         }

当我输入“X”来输入控制时，它会带来“XYZ”、“XYZD”。它可以在 Firefox 和 Chrome 中正常工作。但在 IE 中，它不能正常工作。如何解决这个 IE 问题？

提前致谢...

Answer 1

您不能使用 CSS 在 IE 中的 SELECT 中隐藏 OPTION。而是添加第二个 ListBoxSource 以及所有需要的选项，然后仅将满足您条件的选项从 ListBoxSource 复制到 ListBoxSource。