jQuery 자동 완성 상자가 스크롤에서 사라 집니까?

제한된 높이와 'overflow-x : auto;'로 jQuery 자동 완성 플러그인을 사용하려고합니다. 결과를 설정합니다. 검색을 수행하고 필요한대로 데이터를로드합니다. 문제는 결과가 최대 높이를 초과 할 때 스크롤을 시작하자마자 결과 div가 사라집니다. 결과를 클릭하면 예상대로 텍스트 상자가 채워집니다.jQuery 자동 완성 상자가 스크롤에서 사라 집니까?

무엇 내가 뭘하면 다음과 유사한 : 나는 그것을 스타일을 몇 가지 CSS, CSS 클래스를 추가/제거하여 결과를 강조 핸들 일부 라이브 이벤트입니다이 http://jqueryui.com/demos/autocomplete/#maxheight

유일한 차이점, 그리고 원숭이 패치 결과 강조 표시를 추가하려면 여기에 포함하십시오. jQueryUI: how can I custom-format the Autocomplete plug-in results?

이러한 변경 사항에 대한 설명은 아무런 영향을주지 않습니다.

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"); 
    }); 
}

와 CSS : jQuery를/jQuery를-UI 전문가로부터

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; 
}

모든 제안은 환영 할 것을 다음과 같이 코드입니다.

출처

2012-01-23 Rohaq

데모 페이지를 어딘가에 배치 할 수 있습니까? 왜, 왜 mousein/mousover 이벤트가 필요합니까? 자동 완성은 적절한 스타일을 지정해야합니다. – demalexx

나는이 문제를 발견했다. 나는 autocomplete javascript가 별도의 스크립트 파일로로드 된 autocomplete에 관한 오래된 문서를 사용하고 있었다. jquery.min.js 및 jquery-ui.min.js 만로드하면 문제가 해결되었습니다. – Rohaq

그러나 jsbin에서 테스트 할 때 대답을 이끌어 내면서 Upvoted 귀하의 의견 : – Rohaq

데모 페이지를 만들 때 대답을 찾았습니다. autocomplete를 별도의 JS 파일로로드 한 autocomplete 사용에 관한 오래된 문서를 사용하고있었습니다.

jquery.min.js 및 jquery-ui.min.js 만로드하면 문제가 해결됩니다.

출처

2012-01-23 15:22:05 Rohaq

jQuery 자동 완성 상자가 스크롤에서 사라 집니까?

답변

관련 문제