Modifying CSS - ul.as-list - Click scroll bars in IE8 and list disappears

Charlie's Avatar

Charlie

10 Mar, 2010 04:48 PM

This might be a difficult one as it seems to be a IE8 problem...

My goal is to have a searchable list that has ~1000 items in it. If the search returns a large list, I want ul.as-list to have scroll bars. I accomplished this by adding

height: 200px;
overflow: auto;

to autoSuggest.css under ul.as-list. This works as expected in FF 3.6 - I can click on the scroll bars with the desired results. However, in IE8 if I click the scroll bar, the list disappears. I suspect onblur is being fired for the input box which hides the suggestions. I believe onblur of the input box fires before onscroll of the suggestion list.

Does anyone know a fix for this?

  1. 1 Posted by Durukan on 22 Apr, 2010 07:56 PM

    Durukan's Avatar

    i have the same problem and cant solve it. Please help.

  2. 2 Posted by Mitchell on 03 Jun, 2010 05:50 PM

    Mitchell's Avatar

    Me too, trying to look into solutions now....

  3. 3 Posted by Mitchell on 03 Jun, 2010 11:30 PM

    Mitchell's Avatar

    I fixed it! Tested in Chrome 5 (Mac / PC) Safari 4 (Mac), IE6, IE7, FF

    On line 83 where it reads:

    var results_ul = $('

      ');

      Modify it to read:

      var results_ul = $('

        ').mouseenter(function(e){input_focus = false;}).mouseleave(function(e){input_focus = true; input.focus();});
      • 4 Posted by Michael J on 09 Jun, 2010 03:14 PM

        Michael J's Avatar

        Excellent! Thank you for that fix!

        Any idea how to get the list to scroll when using the down arrow?

        Thanks

      • 5 Posted by Jamie on 07 Nov, 2011 03:24 PM

        Jamie's Avatar

        Thanks, I had the same problem with Safari. Being able to scroll with the arrow keys is the next step. As an initial step I tried

        active.get(0).scrollIntoView();

        in moveSelection() but it doesn't really work properly.

      • 6 Posted by jason.chua.rs on 06 Aug, 2012 02:02 AM

        jason.chua.rs's Avatar

        You need to add the same thing to line 258 for repeated results to work.

        results_holder.html(results_ul.html("")).hide();

        to

        results_holder.html(results_ul.html("")).mouseenter(function(e){input_focus = false;}).mouseleave(function(e){input_focus = true; input.focus();}).hide();

      • 7 Posted by ana on 07 Jul, 2014 05:07 PM

        ana's Avatar

        Excellent Solution..short and perfect !

      Reply to this discussion

      Internal reply

      Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

      Attaching KB article:

      »

      Attached Files

      You can attach files up to 10MB

      If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

      Keyboard shortcuts

      Generic

      ? Show this help
      ESC Blurs the current field

      Comment Form

      r Focus the comment reply box
      ^ + ↩ Submit the comment

      You can use Command ⌘ instead of Control ^ on Mac

      Recent Discussions

      08 Feb, 2017 08:05 AM
      08 Feb, 2017 08:02 AM
      08 Feb, 2017 07:56 AM
      08 Feb, 2017 07:53 AM
      08 Feb, 2017 07:45 AM