用javascript實現下拉式清單的自動篩選功能

下拉式清單大家都用的多了，如果下拉式清單裡面有太多項，使用者在尋找其中的一項就比較困難。這種時候大家都會想到排序，但有時候關鍵字不總是排在第一位，排序後還是有些難找。對下拉式清單項目進行簡單篩選就變得特別有效。function SelectFilter(sel)
{
    var txt = window.prompt("請輸入過濾條件：", "");
    if(document.filter == undefined)
    {
        document.filter = new Array();
    }
    if(document.filter[sel.id] == undefined)
    {
        document.filter[sel.id] = new Array();
        for(var i = 0; i < sel.options.length; i++)
        {
            document.filter[sel.id][i] = sel.options[i];
        }
    }
    else
    {
        for(var i = sel.options.length - 1; i >= 0; i--)
        {
            sel.options.remove(i);
        }
        for(var i = 0; i < document.filter[sel.id].length; i++)
        {
            sel.options.add(document.filter[sel.id][i]);
        }
    }
    if(txt == undefined || txt == "")
    {
        return;
    }
    for(var i = sel.options.length - 1; i >= 0; i--)
    {
        if(sel.options[i].text.indexOf(txt) < 0)
        {
            sel.options.remove(i);
        }
    }
    if(sel.options.length > 0)
    {
        sel.options[0].selected = true;
    }
}

在使用的時候，向如下調用：1 <input type="button" value="" onclick="javascript:SelectFilter(<%= ddlInterval.ClientID %>);">

看看效果，應用之前：

進行篩選，輸入2422：

篩選出來的結果：

之前發的指令碼還有些小問題，如果使用者點“取消”按鈕，會將下拉項全部清空，也不會預設選擇第一項。這些都已經修正。