locked
Lightswitch HTML with input type="search" not working RRS feed

  • Question

  • I have a query set up that accepts a search parameter, and a few other bits of code that automatically searches the when there are more than 2 characters in the inputbox, and clears the search if the inputbox is empty. The searchbox is being rendered via javascript.

    Everything works like this, with the input set to "text":

    myapp.ViewCustomers.SearchTerm_render = function (element, contentItem) {
        // Write code here.
        $(element).append('<input type="text" />');
        onInputAsYouType(element, 2, function (text) {
            contentItem.screen.SearchTerm = text;
        });
        function onInputAsYouType(element, numberOfRequiredChars, done) {
            var inputbox = $("input", $(element));
            inputbox.on("input", function (e) {
                var text = $(this).val();
                if (text.length >= numberOfRequiredChars) {
                    done(text);
                } else {
                    if (text.length == 0) {
                        done(text);
                    };
                };
            });
        };
    };
    The moment I change the input type to "search" I lose all search functionality. I thought the only difference between "search" and "text" was the magnifying glass icon and ability to clear the inputbox. 

    Does lightswitch support input types of search? If so, how do you go about using them? I can't seem to get it to work.

    Tuesday, October 21, 2014 8:25 PM

All replies

  • Does lightswitch support input types of search? If so, how do you go about using them? I can't seem to get it to work.

    @ thatITguyfromGA  Have you solved it?  I have similar problem.
    Friday, November 21, 2014 2:53 PM
  • Hi Andrew,

    Whilst it takes a slightly different approach to instigating the search (based on an input delay rather than number of characters typed) we're using the following helper function to style standard text boxes we've linked to query parameters: -

    function configureAsSearchTextBox (element, contentItem, options) {
    	/// <summary>
    	/// Configure a standard TextBox to be a SearchTextBox.
    	/// </summary>
    	/// <param name="element" type="HTMLElement">
    	/// A root HTML element under which the
    	/// the content item visual is rendered.
    	/// </param>
    	/// <param name="contentItem" type="msls.ContentItem">
    	/// A content item that provides the view model for the visual elements.
    	/// </param>
    	/// <param name="options" optional="true" type="PlainObject">
    	/// A set of key/value pairs used to select additional configuration options. All options are optional.
    	/// <br/>- Boolean setFocus: determines whether the focus is automatically set to this SearchTextBox when the screen is loaded (default: True)
    	/// <br/>- Boolean searchOnInput: determines if searching occurs as the value changes in the SearchTextBox rather than waiting for return (default: True)
    	/// <br/>- Number searchOnInputDelay: determines the milliseconds delay before searching occurs (default: 750 ms)
    	/// </param>
    	options = options || {}; // Force options to be an object
    
    	var $element = $(element);
    
    	// Style as a Search Text Box
    	$element.parent().addClass("msls-control-search");
    	$element.removeClass("ui-input-text");
    	var $input = $("input", $element);
    	$input.attr("data-type", "search");
    
    	// Set focus
    	if (!options.setFocus || options.setFocus === true) {
    		$(window).one("pagechange", function (e, data) {
    			$input.first().focus();
            });
    	}
    
    	// Search on input
    	if (!options.searchOnInput || options.searchOnInput === true) {
    		if (contentItem) {
    			var delay = 750;
    			if (options.searchOnInputDelay) {
    				delay = options.searchOnInputDelay;
    			};
    			var t = null;
    			$input.on("input", function (e) {
    				clearTimeout(t);
    				var $this = $(this);
    				t = setTimeout(function () {
    					var val = $this.val();
    					if (val === "") {
    						val = null;
    					}
    					contentItem.value = val;
    				}, delay);
    			});
    		}
    	}
    };
    


    We then call this function from the postRender of the standard text box to configure it as a search text box e.g.: -

    myapp.ViewCustomers.SearchTermTextBox_postRender = function (element, contentItem) {
        configureAsSearchTextBox(element, contentItem, { searchOnInputDelay: 500 });
    };

    Hope this helps,

    Chris



    • Edited by ChrisCookDev Saturday, November 22, 2014 9:02 PM
    • Proposed as answer by ChrisCookDev Sunday, June 21, 2015 9:52 PM
    Saturday, November 22, 2014 8:50 PM