javascript - 使用在文本框中输入的文本搜索复选框中的项目

Question

我想在清单框中搜索。当用户在文本字段中输入文本时，如果复选框列表中存在此类项目，则应选中它。

HTML：

<asp:TextBox ID="TextBox1" runat="server" OnTextChanged= "return SearchList();"/>
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem>Vincent</asp:ListItem>
    <asp:ListItem>Jennifer</asp:ListItem>
    <asp:ListItem>Shynne</asp:ListItem>
    <asp:ListItem>Christian</asp:ListItem>
    <asp:ListItem>Helen</asp:ListItem>
    <asp:ListItem>Vladi</asp:ListItem>
    <asp:ListItem>Vinz</asp:ListItem>
    <asp:ListItem>Churchill</asp:ListItem>
    <asp:ListItem>Rod</asp:ListItem>
    <asp:ListItem>Mark</asp:ListItem>
</asp:CheckBoxList>

JavaScript：

function SearchList() {
    try {
        var l = document.getElementById('<%= CheckBoxList1.ClientID %>');
        var tb = document.getElementById('<%= TextBox1.ClientID %>');
        var p = l.item.length
        if (tb.value == "") {
            ClearSelection(l);
        } else {
            for (var i = 0; i < l.options.length; i++) {
                if (l.options[i].value.toLowerCase().match(tb.value.toLowerCase())) {
                    l.options[i].selected = true;
                    return false;
                } else {
                    ClearSelection(l);
                }
            }
        }
    } catch (e) {}
}

function ClearSelection(lb) {
    lb.selectedIndex = -1;
}

Answer 1

我不知道asp，我将用简单的 HTML 来弄清楚
它可能对你有帮助。
HTML 部分

<select id="combo">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br>
<input type="text" id="searchTXT" onblur="checkCombo();"> 

Javascript 部分

function checkCombo() {
    try{
        var searchVal = $('#searchTXT').val();
        var options= document.getElementById('combo').options;
        for (var i= 0, n= options.length; i < n ; i++) {
        if (options[i].value.toLowerCase()==searchVal.toLowerCase()) {
            document.getElementById("combo").selectedIndex = i;
            break;
        }
    }
    }
    catch(e){}
    }