Suggest box handling large amount of data

Hi All,

We are facing a problem with suggest box. We are using an XML file as a data source for suggest box. But this XML file is too large, and it contains 10000+ records (its size is 800 KB).
(* We are using Backbase version 4.1.2, and Struts connector).
Because of this large amount of data, response was slow, and we used to get duplicate suggestions. Later we found that we need to specify 'suggestDelay' attribute for this (I have a confusion about this attribute, does it say, results will not be displayed until 1 second or request will not be submitted until 1 second, please elaborate on this).
After specifying suggestDelay, duplicate suggestions problem is solved, but the response time is very slow.
Please guide how we can tackle this large amount of data and still get good performance (short response time).
1. Is there any way where we can divide the data alphabetwise in multiple files, so as to limit the data that needs to be iterated with each request ?
2. Instead of XML file, can we use a server side component, say Servlet, which will listen to suggest box and return suggestions based on characters entered ? If this is possible please write the details of it, and if possible provide an example also.
3. Can we solve this issue by extending suggest box, if yes please let us know the steps for it and what piece of code we need to change.
4. If there is any other better approach to gain good performance while avoiding duplicate suggestions, then please let us know.

Regards,
Ajay

Suggest box handling large amount of data

Hi,

Can anyone atleast guide me to solve duplicate/multiple suggestions problem. I get duplicate suggestions in suggestbox all showing same record. How can I avoid this? Do I have to specify suggestDelay attribute? If yes, how can I figure out a perfect value for it, to make sure that duplicate suggestions are not displayed in any case.

Regards,
Ajay

Suggest box handling large amount of data

Hi,

Is it possible to modify dataUpdate() method of suggestBox, so that instead of iterating through the whole dataSource, I can make a XMLHttpRequest call to a server side component which will return a list of suggestions and I can display this suggestions as suggestBoxOptionCol.

If this is possible, then please help me on this ...
1. How can I synchronize receiving response from server side component and populating suggest box suggestions, i.e. suggestions will not be populated until my response is returned.
2. What is the best strategy to fetch suggestions from server-side?
3. What approach will give me fastest results, server-side fetch or client-side processing and filtering?

Regards,
Ajay

At (3): For 10000+ records I

At (3): For 10000+ records I would recommend doing server-side processing and filtering. Web browsers are not made to handle such large data sets and will be slow. I'm not very technical myself, so maybe someone else can give more detailed suggestions?

If this is an urgent problem: we do have premium support services available, and we could even built this functionality for you, if you have some budget available. Please send me an email if interested (jep + backbase + com)

Best,
jep

set and unset the url

I had a problem similar to this. My solution was to dynamically set and unset the url attribute of the datasource. I created a keyup event handler on the suggestbox, used some fuzzy logic to accept a minimum of 3 starting characters (all whitespaces excluded), then I set or unset the url, passing the value of the suggestbox to the backend to perform filtering before returning the results.

Hope that helps.

suggestBox

Hi Akamble and Tordona,

Thank for your suggestion Tordona. Yes , that is one of solution for suggest with large amount of data. Actually, I had answered a question how to make suggestBox auto completion starting on third key enter (see links http://bdn.backbase.com/node/4419).

Another way is to have delay in your suggestBox. You can introduce delay in your suggestBox by adding delay atttribute that specifies the delay in milliseconds before suggestions are actually made. This reduces the amount of unnecessary suggestions when a user is still typing a value.
<b:suggestBox ... suggestDelay="500"  />

Cheers,

Yudi

I think would be a useful

I think would be a useful feature, perhaps as an attribute

<b:suggestBox suggestMinimumChar="3" />

Suggest box handling large amount of data

Hi tordona,

I agree with you , there is already suggestMaximum attribute that specifies the maximum amount of suggested options that are visible and I think there should be suggestMinimum attribute that speficies the minimum of key input to start auto completion in a suggest box.
I will add this as feature request in our issue tracking system for BTL improvement.

Cheers,

Yudi

Suggest box handling large amount of data

Hi All,

Solved the problem by extending suggestBox and overriding getSuggestions() method (skipped dataSource and dataUpdate).
We wrote a Struts action which queries database and provides suggestions in response as a JSON string. Later we used these suggestions to populate as suggestBoxOptions.
In case of large dataset Server-side component is the best bet. The response we are now getting is within milliseconds as per our expectations.
:)

One more thing we need is if we are not able to find any suggestions, then we want to display a string like 'No suggestions found', as suggestBoxOption (in dropdown), but at the same time we want that user should not be able to select it (i.e. it should be disabled, it should be just like message to user). If user deletes his input and enters a sequence for which suggestions are available, then we want to again form suggestBoxOptions and make it available for selection to user.

Regards,
Ajay

Suggest box handling large amount of data

Hi Ajay,

Good to hear you have solved the problem. Of course, you can have no suggestion found message when the suggestion is null and disable its selection so the user can not select it. You can create custom suggestBox extended from b:suggestBox and custom suggestBoxOption extended from b:suggestBoxOption. Overwrite some its method and property to add certain functionality.

modify update method in suggestBoxBase.xml line 217 to create message if no result return

if(aResults.length == 0){
var oOption = bb.document.createElementNS(btl.namespaceURI, 'suggestBoxOption');
var oOptionCol = bb.document.createElementNS(btl.namespaceURI, 'suggestBoxOptionCol');
var oText = bb.document.createTextNode('no suggestion found');
oOptionCol.appendChild(oText);
oOption.appendChild(oOptionCol);
this.appendChild(oOption);
}

modify suggestBox highlight property in suggestBox.xml line 139 to not to highlight if the suggestion result is null

 
if(this.viewNode.textContent != 'no suggestion found'){
bb.html.addClass(this.viewNode, ['btl-chameleon-highlightBackground','btl-chameleon-highlightText']);
bb.html.scrollIntoView(this.viewNode);
}

modify text property of suggestBoxOption base in suggestBoxBase.xml line 491 not to get the textContent the suggestion result is null

if(aChildren[i].getProperty('textContent') != 'no suggestion found'){
sValue = aChildren[i].getProperty('textContent');
break;
}

cheers,

Yudi

Suggest box handling large amount of data

Hi Yudi,

I tried your solution and it worked as expected. User cannot highlight or select option if no suggestions were returned.

However, this works only if I am using down arrow key and enter to select. I tried to select using mouse click, and though option was not selected after mouse click, after mouse click the suggestions were simply disabled.

I mean if I clicked on 'No suggestions found' option, then it won't be selected, but after this click if I erased old characters, and entered new characters, then suggestions were not being displayed.

Please, write what may be going wrong.

Regards,
Ajay