Using c# and jquery to display and filter larger lists on web page

Posted on 2012-09-05
Last Modified: 2012-09-28
I am using c#, Visual Studio 2010 and jquery to create the following page which displays a list of stock to userse which they can select to download details of:  

The "Available Stock" listbox displays all available products.  As the user types into the "Stock Filter" textbox the items in the "Available Stock" listbox are filtered to display only matching items.  Users select the items and click the Add button to select the required items.

This has been working fine for less than 750 products.  We now have to support up to 5000 products we are having problems with the current solution and looking for an alternative which would still allow the user to filter etc.
Question by:canuckconsulting
    LVL 1

    Expert Comment

    Could you tell us about the kinds of issues are you facing?
    LVL 50

    Expert Comment

    by:Julian Hansen
    Why don't you use an ajax solution - as you type into the filter box you have an autocomplete type function that calls back to the server using AJAX and returns a list of products matching the typed in flitered text.

    Author Comment

    psreloaded - the main issue is the jquery I have written to filter the list does not get called.  The 5000 items appear (I have not checked) to be in the list but javascript keyup events do not fire.

    julianH - i need to allow the user to browse the entire list of available product.  So if they want they can scroll through all the products to select.
    LVL 50

    Accepted Solution

    Have you tried viewing in FF + Firebug to see if any script errors are being generated?

    Otherwise post a link so we can have a look

    Author Comment

    I can't seem to find any errors in firefox or IE.  I am creating a sample and will upload a link shortly.

    Author Comment

    The problem turns out not to be related to list size at all!  Firefox did not report a bug but instead everything worked.  I now realise that the site works flawlessly in Firefox but only works intermitantly in IE 8 and the latest Chrome.

    Besides my own js files I am using the JQuery 1.8 library and the relevant code is in a ready() method.  Any thoughts on how I can work out why the browser problem?

    Author Closing Comment

    Ultimatley this took me on the right path.  Thanks!

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Suggested Solutions

    Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit ( and similar technologies have enjoyed wide adoption, making it possib…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now