JavaScript snippet to turn a "custom control" into a JQuery search box (and move it to the command bar)

switchtory.lightswitchsearchbox

(function ($) {

    $.widget("switchtory.lightswitchsearchbox", {


        _create: function () {
        },

        _init: function () {

        },

        destroy: function () {
        },

        bindTo: function (contentItem) {
            this.contentItem = contentItem;
        },

        render: function () {
            var that = this;

            $('.msls-footer').append($('<input type="search" />'));

            setTimeout( //Give JQueryMobile a moment to process controls.
                function () {

                    //Find the resulting controls
                    var processedFooter = $('.msls-footer');
                    var searchBox = $('div', processedFooter).first();

                    //Tweak appearance for command bar
                    searchBox.addClass('msls-vauto');
                    searchBox.addClass('msls-buttons-row');


                    //Set up the bindings
                    var searchControl = $('input', searchBox);
                    that.contentItem.dataBind('value', function (newValue) {
                        searchControl.val(newValue);
                    });

                    searchControl.change(function () {
                        that.contentItem.value = searchControl.val();
                    });

                });
        },
    });

}(jQuery));

Hi

Can you please explain me how to add it to my project.

Thanks