2010-07-07 4 views
3

나는 AYXA 자동 완성 문구가 포함 된 것을 <textarea>에 작성하고 있습니다. 나는 jquery autocomplete 플러그인을 사용하여 잘 작동한다. 그러나이 코드는 하드 코드되어 아래의 아래에 <textarea> 팝업을 배치합니다.맞춤 팝업 위치가있는 Ajax 자동 완성

내가 작업하고있는 내용은 <textarea>이 페이지 하단에 있습니다. 이상적으로 표시 할 옵션이 인 경우 위의 <textarea>입니다.

이와 비슷한 기존의 자동 완성 스크립트가 있습니까? 내 다른 옵션은 다음과 같습니다

  • 시도가 사후 그것을 처음부터
  • 쓰기 뭔가를 재배치 조각에 플러그인 코드를 해킹 더 JQuery와
  • 를 사용하여 위치를 변경 (단순 소리,하지만이 있습니다 에 약간의 뉘앙스가 있음 자동 완성)

제안 사항?

#known-parent .ac_results 
{ 
    position: fixed !important; 
    top: auto !important; 
    bottom: 80px !important; 
} 

답변

4

세계에서 가장 깨끗한 해결책은 아니지만 CSS에서 "! important"를 사용하여 자동 완성 플러그인이 작성하는 스타일 속성을 덮어 쓸 수 있습니다.

스타일은 가능한 한 CSS에 속합니다.

올바르게 기억하면 플러그인은 자동 수정 div의 "스타일"속성에 "상단"값을 설정합니다. 당신의 CSS에서

당신이 할 수 있어야 그냥 수행

#whatever_the_id_of_the_box_is { 
    position: absolute !important; 
    top: {{ whatever value you want here }} !important; 
} 
+0

지금이 시도 ... –

+0

화려한; 거창하게 감사합니다. –

1

당신이 팝업의 CSS를 변경하고 마진 정상에 음의 값을 할당 할 수 있습니다 :


는 정보를 원하시면, 여기 내가 함께 결국 무엇인가? 콘텐츠를 상단으로 이동해야하지만 관련 값이 상단에 표시되므로 결과가 약간 이상하게 보입니다.

자동 완성 플러그인을 편집하여 컨테이너의 style을 편집하고 상자의 위치를 ​​이동할 수 없습니까? 나는 그것이 너무 어려울 것이라고 생각하지 않지만, 잠시 동안 그 플러그인을 보지 못했습니다.

<div style="display: none; position: absolute; width: 151px; top: 21px; left: 91.65px;" class="ac_results"></div> 

플러그인 코드에서이를 조정해야합니다.

편집 : 실제로 이것을 권하지는 않습니다. UI 플러그인에서 결과 순서를 반대로 바꿀 수있는 방법이 있어야합니다. 그렇게하고 스타일 값을 변경하면 깨끗한 결과 세트가 있어야합니다. 내가 기회가있을 때 정확한 코드를 추가하겠습니다.