jQuery autocomplete box disappears on scroll?

Question

I'm trying to use the jQuery autocomplete plugin, with a limited height and 'overflow-x: auto;' set for the results. I do a search, and it loads data as it should. The problem is that as soon as I start scrolling when results exceed the maximum height, the results div disappears. Clicking on results fills the text box as expected.

What I'm doing is similar to the following: http://jqueryui.com/demos/autocomplete/#maxheight

The only differences I have are some CSS to style it, some live events that handle highlighting results by adding/removing CSS classes, and the monkey patch included here to add result highlighting: jQueryUI: how can I custom-format the Autocomplete plug-in results?

Commenting these changes out does nothing. Code is as follows:

function monkeyPatchAutocomplete() {
  // Adapted from code on https://stackoverflow.com/questions/2435964/jqueryui-how-can-i-custom-format-the-autocomplete-plug-in-results
  // don't really need this, but in case I did, I could store it and chain
  var oldFn = $.ui.autocomplete.prototype._renderItem;

  $.ui.autocomplete.prototype._renderItem = function( ul, item) {
    var re_match = new RegExp(this.term, "ig");
    var t = item.label.replace(re_match,"<span style='font-weight:bold;'>" + 
            this.term + 
            "</span>");
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + t + "</a>" )
        .appendTo( ul );
  };
}

$(document).ready(function() {
  monkeyPatchAutocomplete();

  $.getJSON("cgi-bin/script.pl?return_type=search", function(json) {
    $.each(json.results, function(i,result) {
      var result_string = result.string1 + "/" + result.string2 + "/" + result.string3;
      arr_results.push(result_string);
    });
    $("input#search_box").autocomplete({ minLength: 2, source: arr_results });
  });

  $("li.ui-menu-item").live("mouseover", function() {
    if( $(this).has("a.ui-state-hover") ) {
      $(this).addClass("autocomplete-hover");
    }
  });
  $("li.ui-menu-item").live("mouseout", function() {
    $(this).removeClass("autocomplete-hover");
  });
}

and the CSS:

ul.ui-autocomplete {
  background-color: lightblue;
  border: 1px solid black;
  width: 300px;
  font-size: 14px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

li.ui-menu-item {
  list-style-type: none;
}

.autocomplete-hover {
  background-color: skyblue;
  cursor: pointer;
}

Any suggestions from jQuery/jQuery-UI pros would be welcomed.

Could you place demo page somewhere? BTW, why do you need mousein/mousover events? Autocomplete should assign appropriate styles itself. — demalexx, Jan 23 '12 at 14:42
I found the problem - I was using an outdated document regarding autocomplete, where the autocomplete javascript was loaded as a separate script file. Loading only jquery.min.js and jquery-ui.min.js fixed it. — Rohaq, Jan 23 '12 at 15:07
Upvoted your comment, however, as it led me to the answer when I was testing on jsbin :) — Rohaq, Jan 23 '12 at 15:19

score 0 · Accepted Answer · answered Jan 23 '12 at 15:22

0

I found the answer when trying to build a demo page; I was using an outdated document regarding the use of autocomplete, which loaded autocomplete as a separate JS file.

Loading only jquery.min.js and jquery-ui.min.js fixed my problems.

answered Jan 23 '12 at 15:22

Rohaq

1,368
1
11
22

jQuery autocomplete box disappears on scroll?

1 Answers1