Jquery quicksearch issue with Sharepoint 2013

Question

I'm using a jquery plugin called quicksearch within Sharepoint 2010 and it works perfectly. Unfortunately were being forced to migrate onto sharepoint 2013 and it's stopped working. An error is shown saying that the function is undefined. I believe I've narrowed this down to the quicksearch function itself.

Here is the preliminary code:

    _spBodyOnLoadFunctionNames.push("Load");

$('[name=search]').on('keyup', function(){
        Load();
    });

function Load() {
    var searchArea = "#cbqwpctl00_ctl22_g_ca6bb172_1ab4_430d_ae38_a32cfa03b56b ul li";
    var qs = $('input#id_search_list').val();
    qs.quicksearch(searchArea);         

    $('.filter input').on('change', function(){
        checkAndHide()
        //$(searchArea).unhighlight();
    });






    function checkAndHide(){
        var inputs = $('.filter input');
        var i =0;
        for (var i = 0; i < inputs.length; i++){
            if (!inputs[i].checked){
                $('.' + inputs[i].name).addClass('filter-hide');
            } else {
                $('.' + inputs[i].name).removeClass('filter-hide'); 
            };
        };
    };


}

Here is an example of the quicksearch library I'm using:

(function($, window, document, undefined) {
$.fn.quicksearch = function (target, opt) {

    var timeout, cache, rowcache, jq_results, val = '', e = this, options = $.extend({ 
        delay: 300,
        selector: null,
        stripeRows: null,
        loader: null,
        noResults: 'div#noresults',
        bind: 'keyup keydown',

        onBefore: function () { 

                    var ar = $('input#id_search_list').val()

        if (ar.length > 2) {
            var i=0;
            var ar2 = $('input#id_search_list').val().split(" ");
            for (i = 0; i < ar2.length; i++) {

                $(searchArea + ':visible');
            }
            return true;
        }
        return false;
        checkAndHide()
        },
        onAfter: function () { 
            return;
        },
        show: function () {
            this.style.display = "block";
        },
        hide: function () {
            this.style.display = "none";
        },
        prepareQuery: function (val) {
            return val.toLowerCase().split(' ');
        },
        testQuery: function (query, txt, _row) {
            for (var i = 0; i < query.length; i += 1) {
                if (txt.indexOf(query[i]) === -1) {
                    return false;
                }
            }
            return true;
        }
    }, opt);

    this.go = function () {

        var i = 0, 
        noresults = true, 
        query = options.prepareQuery(val),
        val_empty = (val.replace(' ', '').length === 0);


        for (var i = 0, len = rowcache.length; i < len; i++) {
            if (val_empty) {                
                options.hide.apply(rowcache[i]);
                noresults = false;
            } else if (options.testQuery(query, cache[i], rowcache[i])){
                options.show.apply(rowcache[i]);                
                noresults = false;          
            } else {
                options.hide.apply(rowcache[i]);
            }
        }           




        if (noresults) {
            this.results(false);
        } else {
            this.results(true);
            this.stripe();
        }

        this.loader(false);
        options.onAfter();

        return this;
    };

    this.stripe = function () {

        if (typeof options.stripeRows === "object" && options.stripeRows !== null)
        {
            var joined = options.stripeRows.join(' ');
            var stripeRows_length = options.stripeRows.length;

            jq_results.not(':hidden').each(function (i) {
                $(this).removeClass(joined).addClass(options.stripeRows[i % stripeRows_length]);
            });
        }

        return this;
    };

    this.strip_html = function (input) {
        var output = input.replace(new RegExp('<[^<]+\>', 'g'), "");
        output = $.trim(output.toLowerCase());
        return output;
    };

    this.results = function (bool) {
        if (typeof options.noResults === "string" && options.noResults !== "") {
            if (bool) {
                $(options.noResults).hide();
            } else {
                $(options.noResults).show();
            }
        }
        return this;
    };

    this.loader = function (bool) {
        if (typeof options.loader === "string" && options.loader !== "") {
             (bool) ? $(options.loader).show() : $(options.loader).hide();
        }
        return this;
    };

    this.cache = function () {

        jq_results = $(target);

        if (typeof options.noResults === "string" && options.noResults !== "") {
            jq_results = jq_results.not(options.noResults);
        }

        var t = (typeof options.selector === "string") ? jq_results.find(options.selector) : $(target).not(options.noResults);
        cache = t.map(function () {
            return e.strip_html(this.innerHTML);
        });

        rowcache = jq_results.map(function () {
            return this;
        });

        return this.go();
    };

    this.trigger = function () {
        this.loader(true);
        if (options.onBefore()) {
            window.clearTimeout(timeout);
            timeout = window.setTimeout(function () {
                e.go();
            }, options.delay);
        }
        return this;

    };

    this.cache();
    this.results(true);
    this.stripe();
    this.loader(false);

    return this.each(function () {
        $(this).bind(options.bind, function () {
            val = $(this).val();
            e.trigger();
        });
    });

};

}(jQuery, this, document)); `

This is where the error comes up:

var qs = $('input#id_search_list').val(); qs.quicksearch(searchArea);

Any help would be appreciated

Answer 1

事实证明，这是代码和主要CSS中的一个小问题，因为2013年SharePoint的作用有所不同