jQueryUI Autocomplete hiện ở vị trí sai khi sử dụng lĩnh vực đầu vào trong div với position: fixed

Question

Tôi có một "modal window" trong một trang web thu được bằng cách áp dụng cho một div thuộc tính css position-fixed. div chứa các trường nhập. Cụ thể, tôi đang sử dụng tiện ích tự động hoàn thành từ jQueryUI. Có hai vấn đề chính:

1) đầu tiên là vì div có vị trí cố định, khi bạn cuộn xuống trang web, đề xuất tự động điền không được hiển thị cố định nhưng được di chuyển lên và xuống với trang. Bạn có thể thấy vấn đề đó tại số Codepen nơi tôi đang sử dụng ví dụ từ trang web jQuery với tính năng tự động hoàn thành tên thành phố.

2) Vấn đề thứ hai là các đề xuất từ ​​tự động điền được hiển thị ở góc trên bên trái của trang chứ không phải ngay bên dưới trường nhập. Thật không may, tôi đã cố gắng để tái tạo vấn đề này trong Codepen, nhưng tôi không thể.

Tôi khá chắc chắn rằng sự cố là do CSS và đặc biệt đối với các thuộc tính kiểu được cung cấp bởi giao diện người dùng JQuery. Có thể sự cố có thể được giải quyết bằng cách sử dụng position option của tiện ích tự động điền.

Tôi nên xác định thuộc tính CSS nào và làm cách nào?

PS: Tôi sử dụng chủ đề được cung cấp tại http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css.

Answer 1

Nhìn vào thư viện giao diện người dùng jQuery, tôi thấy phần tử < ul> được sử dụng để hiển thị các đề xuất. Giao diện người dùng jQuery chắp thêm phần tử này theo mặc định vào tài liệu HTML và không phải là < div> (được sử dụng làm "cửa sổ phương thức") của văn bản đầu vào.

Tuy nhiên, các tài liệu cho thấy rằng tùy chọn appendTo chỉnh cấu hình, trong đó yếu tố autocomplete < ul> nên được nối vào. Nó sử dụng chức năng appendTo() của jQuery. http://jqueryui.com/demos/autocomplete/#option-appendTo

Vì vậy, tôi có một div để chứa những gợi ý:

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

Và trong autocomplete() chức năng tôi đã thêm các tùy chọn:

appendTo: "#container" 

Sau đó, tôi thêm vào CSS sau đây

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

Đó là tất cả!

Answer 2

có cùng sự cố. Xóa chủ đề cơ sở jquerUI, Gỡ cài đặt thư viện jqueryUI sau đó cài đặt lại jqueryUI và bây giờ hoạt động tốt. Không chắc bạn đang làm gì nhưng tôi đang ở trên MVC4 rất nhiều lỗi, tôi sắp tự sát. Chúc may mắn.

EDIT: đây là vấn đề thực sự

Khi nhìn vào một dự án cũ để xem nếu autocomplete đang làm việc, chúng tôi thấy rằng nhiều phong cách trong dự án cũ đã không có trong phiên bản mới hơn. Không chắc chắn nếu tôi xóa chúng nhưng không thể tưởng tượng làm như vậy. Tất cả những gì tôi phải làm là sao chép và dán những lớp đã mất tích từ dự án mới của tôi và mọi thứ đã trở lại bình thường. Tôi nghĩ ai đó đang phá hoại dự án của tôi.

Answer 3

Hãy chắc chắn rằng bạn chỉ tải một phiên bản của Jquery và một trong những UI tôi phát hiện này sau khi đọc câu trả lời @ Riapp, tôi chơi xung quanh và có thể thấy rằng bạn cần phải phù hợp với số phiên bản và không bao giờ quá nhiều ....

Nếu không, tính năng tự động hoàn tất sẽ là tuyệt đối và bay lên trên cùng.

<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" />