Create a JQuery searchbox for LightSwitch HTML pages

I have a LightSwitch project with a query that takes a single (optional) string parameter, then performs a case-insensitive search on the server (there’s only a couple of dozen records, so don’t worry about performance).  If I create a new screen in the HTML client based on this query, then I’ll quickly have something like:

At run-time, this screen will look like:

Cewl, easy money!

However, for no other reason than it being a cool Friday-afternoon-hacking-project, it would be nice if that textbox would look like an actual search control, and if we could move it to the command bar where there’s lots of pretty blue space going unused at the moment…

The trick is really easy: from the screen designer, turn the “SearchTerm” control into a “Custom Control”.  From Properties Panel, choose “Edit render code”.  In the generated method stub, change the code to:

myapp.BrowseTracks.SearchTerm_render = function (element, contentItem) {
    $(element).lightswitchsearchbox();
    $(element).lightswitchsearchbox("bindTo", contentItem);
    $(element).lightswitchsearchbox("render");
};

Wait, that’s it? LightSwitch has some kind of built-in lightswitchsearchbox method?  Nope, but my JQuery widget has 🙂  Just like before, find it on my github page, download, add to the project, and enjoy the result:

 

Keep rocking LS!!!!!