Progressive insight on autocomplete as you type in the Lightswitch html client

Introduction

My previous post on autocomplete was rubbish (this must be British English, right?).

This time I’ll do my best to present something more decent and I’ll leverage more the LightSwitch goodness, as I always try to do.

The Setting

So, the intention is still to have on a simple search screen autocomplete as you type. I’ll construct a simple search screen on “Countries”.

image

 

The Query GetCountriesByName, as the name already reveals, is based on a modeled query (server side) with following code:

public partial class ApplicationDataService
     {
         partial void GetCountriesByName_PreprocessQuery(string Parameter, ref IQueryable<Country> query)
         {
             query = query.Where(c => c.Name.Contains(Parameter));
         }
     }

What we get with this approach auto-of-the-box, is a search screen with search after you pressed enter. That’s ok, for most screens, but for the scenario I’ll elaborate in one of my next articles, I’ll prefer auto complete “as you type.”

Let’s make it now autocomplete as you type

Apply a post render method on the Search Parameter textbox as follows:

myapp.BrowseWithAutoCompleteAsYouType.CountryParameter_postRender = function (element, contentItem) {
     onInputAsYouType(element, 2, function (text) {
         contentItem.screen.SearchValue = 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);
         });
     };
};

That’s all guys !  I encapsulated the logic in the sub method onInputAsYouType with takes also a parameter for indicating after how many characters you want the query to start returning records.

It gives:

In search for perfection

When we run this screen, we will still see that an initial query is issued:

image

There is a nice trick which I learned yesterday from Josh Booker. This trick can solve our problem.

So, first change again the query back to a normal query on Countries, and this time model the query client side:

image

 

Then edit the query client side. Just give it an optional parameter:

 

Now, go to the screens javascript code and leave the code for the postrender method on the searchbox as it is but add following code:

myapp.BrowseCountriesWithQueryHack.created = function (screen) {
    screen.details.properties["Countries"]._entry.simpleDescriptor.createQuery =

        function (filterString) {
            if (filterString) {
                return this.dataWorkspace.ApplicationData["Countries"].filter("substringof('" + (filterString) + "', Name) eq true");
            }
        };
};

This will override the query implementation client side with an odata style query.

The cool thing is now that we can control when the query is executed ! Thanks Josh for this !

When you take now a fiddler trace or via the F12 developer tools, you will see that the query is no longer executed when page loads !.

I’m really starting the love the LightSwitch Html 5 client