Easy to Create, Easy to Change - Easy to use!


New Sample - How to create your own type ahead search in DE85

Started by DataEase
You will need to Sign In to be able to comment on the Blog!

New Sample - How to create your own type ahead search in DE85

Download Sample

In this sample we will showcase some of the new functions in DE85 and help you create something that "all" of your have requested.

A type-ahead search/lookup field like we have all gotten so used to using on the web.

We made this as part of a functionality study where we are going to revise the available functionality in future versions of DataEase, and as always we try to implement it in DataEase to see the feasibility of the approach.

There is a lot of new and exciting options now, and this example will take advantage of the new Timer() event to control the execution and then we use a subform as our "dropdown" or picklist.

As always with these things, you need to "cheat" a little to get it exactly as you want it but rest assured that when we do this "experiments" we make a list of shortcomings to be amended later.

One problem we realised was that the value of a field is not "obtainable" until after you have left the field which gave us a small headache which we will get back to later.

The way we wanted this to work was that you type into the search field, and when you stop (after a short delay) the application would lookup the matching rows.

We tested a little and decided that 400ms was just right. Luckily for us that we have recently included  "ScientificTime" in GetCurrent() function as the old time format would not do smaller than a second which is far from precise enough as you would have to use 2 seconds to make sure there was enough delay as it use the clock and hence could change over in no time at all if you tried to use 1 sec.

We will start with discussing the Timer() event we configured.

Each form has a Timer() event and it is directly on the form object in OML.


There is two main events that we use to get the functionality we want. That is the timer above and the KeyInput() event below on our search field.

On the Search field we simply reset the global variable search each time a key is pressed in the search field.

The rest we leave to the timer.

The timer will check if there is a value in the global variable.

If it is, it will check if the time now is more than 400 ms later than when the last key was pressed. If it isn't it will do nothing but if it is, it will clear the global variable (don't want it to loop) and then it send a keystroke to the search field so the valuechange event happens as the cursor exit the field. 

We need this to happen as we could not get the value out of the field before it is left, and the only way we got the full "monty" was by sending a keystroke rather than setting the focus manually on a different field.

Anyhow the field dummy will now derive the new relational key for our relationship to the "picklist" subform.


This is basically what we need to get the functionality working, so not to hard.

We have done a little decoration too, so the other events and help fields are there to make it look nice and get the functionality there a 100%

For instance the valuechange event on dummy will point the cursor back to the search field.

The dummy field must be "visible" or it will not be derived so we have hidden it by styling it blue with SetStyle(). We could have done this in DT too but then you might have had problems finding it so we do this in run-time.

Have a look and see how you get on.

The final result is quite nifty and you can use it anywhere you like.

As you can see, it is also quite responsive. We have 20.000 rows in the table and when we tried to use a LookupField (Multibox) it simply didn't work but here it works fine.

Good luck!


Written by DataEase 22/06/17 at 16:13:16 Dataease [{8}]FIVE