过滤脚本不适用于Wordpress（使用Jquery）

Question

我有以下使用Jquery过滤的基本选择框。我正在将这个单独构建到我正在实现它的网站。出于某种原因，当我将其包含在我创建的自定义空白wordpress模板中时，过滤器功能拒绝运行（我已经在最后一天验证并且它正在驱动我疯了）。在测试页面上隔离它可以正常工作。我还将jquery实现为functions.php。

的一部分

这是过滤功能块：

    <table class="mInput">
        <form method="POST" action="/add.php">
            <tr>
                <td class="mDescription">Product type:</td>

                <td class="mItem"><input id="textbox" type="text" />
                    <div class="custom-select" style="width:40%;">
                        <select id="select" name="type">

                        <option class="1" value="1">1</option>
                        <option class="2" value="2">2</option>
                        <option class="3" value="3">3</option>
                        <option class="4" value="4">4</option>
                        <option class="5" value="5">5</option>

                    </select>
                    </div>
                </td>
            </tr>
    </table>

以下是我所使用的functions.php文档：

function some_functions_enqueue () {

wp_enqueue_style('style', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all');
wp_register_script('customjs', get_template_directory_uri() . '/js/functions.js', array('jquery'), '1.0.0' );
// enqueue the script
wp_enqueue_script('customjs');
wp_enqueue_script ( 'jquery');
}

add_action('wp_enqueue_scripts', 'some_functions_enqueue');

对于完整性问题，这里是functions.js中的函数供参考：

    jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
        return this.each(function() {
            var select = this;
            var options = [];
            $(select).find('option').each(function() {
                options.push({value: $(this).val(), text: $(this).text()});
            });
            $(select).data('options', options);
            $(textbox).bind('change keyup', function() {
                var options = $(select).empty().data('options');
                var search = $(this).val().trim();
                var regex = new RegExp(search,"gi");

                $.each(options, function(i) {
                    var option = options[i];
                    if(option.text.match(regex) !== null) {
                        $(select).append(
                           $('<option>').text(option.text).val(option.value)
                        );
                    }
                });
                if (selectSingleMatch === true && $(select).children().length === 1) {
                    $(select).children().get(0).selected = true;
                }
            });            
        });
    };

    $(function() {
        $('#select').filterByText($('#textbox'), false);
      $("select option").click(function(){
        alert(1);
      });
    });

页面上的附加脚本：

<script>
    var x, i, j, selElmnt, a, b, c;
    /*look for any elements with the class "custom-select":*/
    x = document.getElementsByClassName("custom-select");
    for (i = 0; i < x.length; i++) {
        selElmnt = x[i].getElementsByTagName("select")[0];
        /*for each element, create a new DIV that will act as the selected item:*/
        a = document.createElement("DIV");
        a.setAttribute("class", "select-selected");
        a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
        x[i].appendChild(a);
        /*for each element, create a new DIV that will contain the option list:*/
        b = document.createElement("DIV");
        b.setAttribute("class", "select-items select-hide");
        for (j = 1; j < selElmnt.length; j++) {
            /*for each option in the original select element,
            create a new DIV that will act as an option item:*/
            c = document.createElement("DIV");
            c.innerHTML = selElmnt.options[j].innerHTML;
            c.addEventListener("click", function(e) {
                /*when an item is clicked, update the original select box,
                and the selected item:*/
                var y, i, k, s, h;
                s = this.parentNode.parentNode.getElementsByTagName("select")[0];
                h = this.parentNode.previousSibling;
                for (i = 0; i < s.length; i++) {
                    if (s.options[i].innerHTML == this.innerHTML) {
                        s.selectedIndex = i;
                        h.innerHTML = this.innerHTML;
                        y = this.parentNode.getElementsByClassName("same-as-selected");
                        for (k = 0; k < y.length; k++) {
                            y[k].removeAttribute("class");
                        }
                        this.setAttribute("class", "same-as-selected");
                        break;
                    }
                }
                h.click();
            });
            b.appendChild(c);
        }
        x[i].appendChild(b);
        a.addEventListener("click", function(e) {
            /*when the select box is clicked, close any other select boxes,
            and open/close the current select box:*/
            e.stopPropagation();
            closeAllSelect(this);
            this.nextSibling.classList.toggle("select-hide");
            this.classList.toggle("select-arrow-active");
        });
    }

    function closeAllSelect(elmnt) {
        /*a function that will close all select boxes in the document,
        except the current select box:*/
        var x, y, i, arrNo = [];
        x = document.getElementsByClassName("select-items");
        y = document.getElementsByClassName("select-selected");
        for (i = 0; i < y.length; i++) {
            if (elmnt == y[i]) {
                arrNo.push(i)
            } else {
                y[i].classList.remove("select-arrow-active");
            }
        }
        for (i = 0; i < x.length; i++) {
            if (arrNo.indexOf(i)) {
                x[i].classList.add("select-hide");
            }
        }
    }
    /*if the user clicks anywhere outside the select box,
    then close all select boxes:*/
    document.addEventListener("click", closeAllSelect);

</script>

考虑到我一直在考虑这个问题，我可能会错过一些简单/丢失的东西，但任何输入都可以。

谢谢！