create search box for zotero bibliography in XUL

Question

I have this block as UI :

<textbox id="style-search" flex="1" type="search" timeout="250" dir="reverse"/>

and this is the onload function:

        var listbox = document.getElementById("style-listbox");
        var searchbox = document.getElementById("style-search");
        var styles = Zotero.Styles.getVisible();
        var index = 0;
        var nStyles = styles.length;
        var selectIndex = null;
        var searchValue = searchbox.value;
    if (searchValue) {
        for (var i = 0; i < nStyles; i++) {
            if (styles[i].title.match(searchValue)) {
                var itemNode = document.createElement("listitem");
                itemNode.setAttribute("value", styles[i].styleID);
                itemNode.setAttribute("label", styles[i].title);
                itemNode.setAttribute("id", styles[i].title);
                if (i % 2 === 0) {
                    itemNode.setAttribute("class", "backG");
                } else {
                    itemNode.setAttribute("class", "backY");
                }
                listbox.appendChild(itemNode);

                if (styles[i].styleID == _io.style) {
                    selectIndex = index;
                }
                index++;
            }
        }
    }

i need this: when i type some string in search box i want to filter all my style base on my style list with that string. i try above code but it doesn't work.