Я пытаюсь использовать плагин автозаполнения jQuery с ограниченной высотой и 'overflow-x: auto;' установить для результатов. Я делаю поиск, и он загружает данные как следует. Проблема в том, что как только я начинаю прокручивать, когда результаты превышают максимальную высоту, div результатов исчезает. При нажатии на результаты текстовое поле заполняется, как и ожидалось.
То, что я делаю, похоже на следующее: http://jqueryui.com/demos/autocomplete/#maxheight
Единственные отличия, которые у меня есть, - это немного CSS для его стилизации, некоторые живые события, которые обрабатывают выделение результатов путем добавления / удаления классов CSS, и патч обезьяны, включенный здесь для добавления выделения результатов:
jQueryUI: как мне отформатировать результаты плагина автозаполнения?
Комментирование этих изменений ничего не дает. Код выглядит следующим образом:
function monkeyPatchAutocomplete() {
// Adapted from code on /1731949/kak-ya-mogu-otformatirovat-rezultaty-plagina-avtozapolneniya
// 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");
});
}
и 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;
}
Приветствуются любые предложения от профессионалов jQuery / jQuery-UI.