I have a request to implement a webDropdown so that it functions like the bing.com website. We have a repository of serial numbers to search. I'm not doing the actual coding but I need to get the programmer as much info as possible so that the requirements can actually be met.
I have three major starting points of which the first two are easy.
1 - I've decided to pre-populate the dropdown with a list of prior searches and MRU numbers. That should appease anyone re-doing the same search.
2 - At anypoint that the user hits the search or enter button whatever they have typed it will be searched and results shown.
3 - this is where the user wants fancy. They want the auto-complete/auto-fill to really kick in on their potential search term and essentially do as they type typing. Much of the time the pre-populated data won't be what they want so after a few input characters it should mostly be filtered away.
However I don't want to start actually auto-searching for anything against the database until I had at least 3 or 4 characters entered (excluding wildcards). The first actual search term against the DB will take their '123' and do a search on '123%'. If they start doing a contains search '%123' then all bets are off and I think we'll disable the auto-filter results until after a search results page has been generated.
I need to have some further chats, and get a prototype in place before the users can get a real sense of how much lag time there is but what I want to avoid is if a user quickly types 7 characters and then pauses that I do a search after 3 characters and waste time. I had planned on using the Client side keyDown or related events to count the number of input characters and then on 3 call my data load. If you go to bing or google and type really fast then the dropdown doesn't offer any choices. I want to simulate that. Is there a way to setup a timer to catch a time lag of x milliseconds between keypresses as sufficient time to do an async search?
Are there any pitfalls / issues to worry about with trying to change the contents of the binded datasource after x keypresses? I'm sort of assuming I set it up as LoadOnDemand + SearchFilter. Then each keypress should trigger a check on the server which should find a new set of data and rebind?
Is my best example to try and simulate one of the chained dropdown lists?
thanks
jack
Hi Jack,
You can control this behavior by setting the AutoFilterTimeoutMs property. Higher value means that after every keystroke, a X ms timeout is initiated, and if no characters are entered in that time, the search is made. Otherwise the timeout is reset, and a new one is started. This means that if your timeout is 1 sec, and the user types more than 1 character in a second, no request will be made until he ends typing himself.
About your second question - i don't think there are any specific pitfalls, it depends to what type of datasource you are going to be binding. If it's going to be a data source object, such as a DataSet/DataTable , then you'd need to keep in mind to store the object in the session and check for IsPostBack, or if you don't want ViewState to be enabled, you'll have to rebind on every postback. Other than that i think it should be straightforward.
Let me know if you have any other questions. Hope this helps,
Angel
Angel,
Thank you for your reply - sorry to take so long acknowleging it, some other production issues came up and I couldn't get back to this.
Just to clarify a bit further I need to control the timeout before I initiate the refresh of the datasource. My flow is:
- populate dropdown with MRU values
- User starts typing and the auto-filter kicks in based on the Timeout above
- User either selects a value, pauses for x Ms, or hits the Search button.
- if the user pauses and has typed at least x characters, or there are no dropdown values left, then I want to do a mini-search to get all the search terms that match what they have typed. Then I'll reset the datasource and re-bind.
What I am trying to avoid is doing a database lookup on 3 characters while they are busy trying to type in character 4,5 and 6.
I found the AutoFilterStarting/Start client events but I'm not actually sure if that helps me as I don't think I can kick off a server search and update datasource from javascript? Is there anything that gets triggered as a server event?
I'm not an ASPX guy so I'm struggling with how best to do this.
I'm thinking that I need to have a standalone timer that checks the input and does the datasource refresh when applicable. Then in the KeyPress and the autofilter event I can reset the timer so it doesn't fire.
Can I get the # of items in the list in the AutoFilterStarting event? If I could do a check and there were 0 rows left to match then that is also a key that I can immediately fire my datasource refresh.
Thanks
I can suggest a couple of things. You can for example handle the ValueChanged client-side events, and cound the characters entered:
var text = dropDown.get_currentValue();
// 2. now check the length of "text", if it is below certain treshold , do nothing
// 3. Cancel the AutoFilterStarting client-side event, so that you avoid automatic filtering:
args.set_cancel(true); // where args are the args from the client-side event handler for "AutoFilterStarting"
If the chars are above that predefined tredhold, you can manually trigger a filtering by using this code:
dropDown.loadItems(dropDown.get_currentValue()); // the parameter to this function is the filter text
You can check the number of items on the client in the following way:
dropDown.get_items().getLength();
Hope this helps,
We are making some progress but I am stuck and confused on something. I want to intercept the keydown/keyup to do some logic. Basically if the user hits enter or tab I want to take the current value and process it.
I've created a handler of the InputKeyUp and InputKeyDown ClientEvents but they don't seem to pass the keycode or work like any KeyUp/KeyDown javascript examples I google.
They pass Infra.Web.UI.DropDownControlEventArgs as the event arg that has no keycode.
How can I trap the key press?
///<summary>
///
///</summary>
///<param name="sender" type="Infragistics.Web.UI.WebDropDown"></param>
///<param name="eventArgs" type="Infragistics.Web.UI.DropDownControlEventArgs"></param>
you can try:
eventArgs.get_browserEvent().keyCode
or:
eventArgs.get_browserEvent().charCode
Hope it helps,