Visual Studio Lightswitch, create a search parameter that auto updates browse screen?

Question

done a bit of research and not found anything for this... I have created a LightSwitch application for a basic contacts table.. the Browse sceen contains the name, number etc... when im using the search parameter, is it possible or this search text box to auto refresh after each key stroke?

for example I type in 'A', and based on the surname it loads all surnames that begins with an A, and without pressing the enter key.

can this be done with internal settings? or am I required to use JavaScript or C#> thanks for any help

Answer 1

I got this from http://blog.pragmaswitch.com/?p=1670, and it works beautifully. I use it in all my search screens.

myapp.BrowseScreen.SearchText_postRender = function (element, contentItem) {
    // This block is from somewhere else, sets the focus to the search box
    $searchBox = $("input", $(element));
    setTimeout(function () {
        $searchBox.focus();
    }, 1);

    // The blog post linked above set the required characters to 3, but I liked the instant filtering of 1
    onInputAsYouType(element, 1, function (text) {
        contentItem.screen.SearchText = text; //SearchText here is the data item in the screen designer linked to the query parameter
    });

    function onInputAsYouType(element, numberOfRequiredChars, done) {
        var inputbox = $("input", $(element));
        inputbox.on("input", function (e) {
            var text = $(this).val();
            if (text.length >= numberOfRequiredChars)
                done(text);
        });
    };
};

You can go to the blog post for screenshots, but it's pretty straightforward. Create your browse / search screen, make the search text a text box, and plug this code into the post render.