JqueryUi 자동 완성 :

Question

내가 fixed에 div CSS의 속성 position에 적용하여 얻은 웹 페이지에 "모달 창"가 고정. div에는 입력 필드가 있습니다. 특히, 내가 jQueryUI을 자동 완성 위젯을 에서 사용하고 있습니다. 두 가지 중요한 문제가 있습니다. 첫 번째는 div가 고정 위치이므로 웹 페이지를 아래로 스크롤하면 자동 완성 제안이 고정되어 표시되지 않고 페이지와 함께 위아래로 이동한다는 것입니다. 이 문제는 Codepen에서 확인할 수 있습니다. 여기에서 도시 이름 자동 완성과 함께 jQuery 웹 사이트의 예제를 사용하고 있습니다.

2) 두 번째 문제는 자동 완성에서 제안 단지 입력 필드 아래 페이지 왼쪽 상단에 도시되지 않는다는 것이다. 불행히도 Codepen에서이 문제를 재현하려고 시도했지만 불가능합니다.

나는 JQuery와 - UI가 제공하는 같은 스타일의 호텔이 상당히 문제가 CSS로 인해 있는지, 특히입니다. 문제는 자동 완성 위젯 position option을 사용하여 해결할 수 있습니다.

내가 정의해야합니다 어떤 CSS 속성을 어떻게 ?

PS : http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css에 제공된 테마를 사용합니다.

Answer 1

jQuery UI 라이브러리를 보면, < ul> 요소가 제안을 표시하는 것을 볼 수 있습니다. jQuery를 UI는 HTML 문서에 기본적으로하지에이 요소를 추가하여 텍스트 입력의 ("모달 창"으로 사용) < DIV>.

그러나, 문서 보여준다 자동 완성 < UL>가 추가되어야 소자 옵션 appendTo 구성한다. 그것은 jQuery의 appendTo() 함수를 사용합니다.

<input type="text" id="myInput" /> 
<div id="container"> 
</div> 

그리고 autocomplete() 기능에 내가 옵션을 추가 : http://jqueryui.com/demos/autocomplete/#option-appendTo

그래서, 나는에 사업부는 제안을 포함 포함

appendTo: "#container" 

그런 다음 나는 다음과 같은 CSS를 추가를

#container { 
    display: block; 
    position:relative 
} 
.ui-autocomplete { 
    position: absolute; 
} 

그게 다야!

Answer 2

같은 문제가있었습니다. jquerUI 기본 테마를 삭제하고 jqueryUI 라이브러리를 제거한 다음 jqueryUI를 다시 설치하면됩니다. 당신이 뭘하고 있는지 확실하지 않지만 MVC4에 너무나 많은 버그가 있습니다. 저는 제 자신을 죽이려고합니다. 행운을 빕니다.

편집 :이 자동 완성은 우리가 이전 프로젝트의 스타일의 많은 새로운에없는 것을 발견 일하고 있는지 확인하기 위해 이전 프로젝트보고에서 진짜 문제

했다. 내가 그들을 지웠을 지 모르지만 그렇게하는 것을 상상할 수는 없다. 내가해야만하는 일은 새 프로젝트에서 빠진 수업을 복사하여 붙여 넣기 만하면 모든 것이 정상적으로 돌아갔습니다. 나는 누군가 내 프로젝트를 방해하고 있다고 생각한다.

Answer 3

내가 주위를 재생, 당신은 단지 Riapp의 대답 @ 읽은 후 하나 개의 jQuery 버전 나는이 발견 된 UI 중 하나를로드 있는지 확인하고 일치하는 버전 번호 및 결코 너무 많은 ....

이 필요하다는 것을 볼 수 있었다

그렇지 않으면 자동 완성이 절대적 일 것이며 맨 위로 날아갑니다.

<script type="text/javascript" 
    src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
    <link rel="stylesheet" type="text/css" 
    href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />