Guest
Welcome login
Share/Save
Share/Save
TIBCOmmunity > Products > General Interface > GI 3.2 to 3.7 Development > Conversations
Home   Members Communities
Conversations () Resources () Blogs ()

GI 3.2 to 3.7 Development

Up to Conversations in GI 3.2 to 3.7 Development

This Question is Possibly Answered

1 "correct" answer available (4 pts) 2 "helpful" answers available (2 pts)

Hi I have a type ahead combo component loading a list of user names. If I don't type anything, it seems it shows all the users starting with "a". How can I list all user names in the drop down menu if i don't type in anything, while still keep the type-ahead feature? also, the list has over 5000 user names typcially, and it significantly drags down the performance. do you have any suggestion to enhance the performance? thanks!

Click to view michael peachey's profile Dabbler 743 posts since
Oct 24, 2008

Hi Yichen -

 

Typically in a case with 5,000 records, we'd use a search function. That's a lot of records for a drop down.

 

  • Give the user a text box with a little search icon next to it.
  • When the user types in the box, let them type whatver they want.
    • If the user tabs out of the field onto the search icon and clicks enter or space (or clicks on the icon) use the value in the textbox as input to the search.
      • Show the results in a popup that lets the user pick the value from the resulting list.
      • Make it easy on the user, just selecting the value will close the popup and enter the appropriate value into the text box
    • If the user tabs past the search icon or clicks anywhere in the screen, validate the entry in the textbox against your list of 5,000
      • If it validates, do nothing
      • If it fails validation, show an error message inline next to the textbox.

 

Just some thoughts.

 

Michael Peachey

Click to view michael peachey's profile Dabbler 743 posts since
Oct 24, 2008

Not sure about the performance. Never tried to do a 5,000 item drop down list. Seems like scrolling it would take all day. After you build it, let us know what you learn on performance. Also curious how it fares in different browsers, especially if IE6 is a target.

 

peachey

Click to view Vic Patterson's profile Aficionado 1,169 posts since
Jul 22, 2008

That's the same pattern I'm using to filter a large dataset, but I use a small jsx3.gui.Dialog that implements a paged Matrix. A similar transformation is triggered for a view filter and is set on the incremental change event for a TextBox.

 

The XSL:

 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output encoding="UTF-8" indent="yes" omit-xml-declaration="yes"/>
<xsl:param name="searchFilter"></xsl:param>
<xsl:template match="/">
<xsl:variable name="lowerCase">abcdefghijklmnopqrstuvwxyz</xsl:variable>
<xsl:variable name="upperCase">ABCDEFGHIJKLMNOPQRSTUVWXYZ</xsl:variable>
<xsl:element name="data">
<xsl:attribute name="jsxid">jsxroot</xsl:attribute>
<xsl:copy-of select="//record[starts-with(translate(@jsxtext,$lowerCase,$upperCase),translat e($searchFilter,$lowerCase,$upperCase))]"/>
</xsl:element>
</xsl:template>
</xsl:stylesheet>

I also keep the original CDF and switch it to a filtered CDF in case the user removes the filter request.

 

--Vic

Click to view Vic Patterson's profile Aficionado 1,169 posts since
Jul 22, 2008


One reason that the pure JSP may not have had an issue with the large list was that the page formatting was done on the server side and had the full resources afforded to it by the web server. When you use GI, or any Ajax technique, to retrieve information and then format it, you are using the browser's resources to do most of the work.

When I build my JavaScript functions to create the request and process the response for such a large list, I make sure that I'm using the asynchronous approach as much as possible. For example, to retrieve a list of currency codes, I use jsx3.sleep to break up the call stack:

 

jsx3.sleep(function(){app.customer.services.callGetListOfValues(CURRENCY_CODE);} );

 

and then in that function, it will subscribe to the response for data handling in a callback:

 

objService.subscribe(jsx3.net.Service.ON_SUCCESS, app.customer.services.onGetListOfValuesSuccess);

 

When I post process the response for use in a Matrix component, I set the "XML Bind" property to "Bound" so that when I set the document in the Local Data Cache the Matrix is updated without a specific repaint.

 

If you try to fetch and process data in a single function, it may be part of the frozen browser problem.

 

--Vic



More Like This

  • Retrieving data ...