Make a parameter text field to be a Lightswitch HTML search box

Question

Hello everyone, 

I followed this article to create a searchbox on HTML screen. But I don't want this searchbox placed on the footer but still on it position, like this:

what should i change in the script file?

(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));

Thanks for helping.

Answer 1

This code does what you want. I have changed the 'render' method to take the 'element' as a parameter so that the custom control's '_render' method passes its 'element' into the widget...

myapp.BrowseUsers.SearchText_render = function (element, contentItem) {
    // Write code here.
    $(element).lightswitchsearchbox();
    $(element).lightswitchsearchbox("bindTo", contentItem);
    $(element).lightswitchsearchbox("render", element); //CHANGE:
};
(function ($) {

    $.widget("switchtory.lightswitchsearchbox", {


        _create: function () {
        },

        _init: function () {

        },

        destroy: function () {
        },

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

        render: function (element) {
            var that = this;

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

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

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

                    //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));

---

Dave Baker | AIDE for LightSwitch | Xpert360 blog | twitter : @xpert360 | Xpert360 website | Opinions are my own. For better forums, remember to mark posts as helpful/answer.

Answer 2

Dave, thank a lot :)