Jquery 사용자 자동 완성에서 나만의 제안 위치와 너비를 어떻게 설정할 수 있습니까?

Question

신입생 jquery ui autocomplete!

내가 발견 팝업 제안의 폭 단지 자동 완성 플러그인와 바인더 제본 입력 필드 같은,하지만 제안을 내 내용이 더 이상 제안의 폭 목록 창을 팝업보다 수 있습니다. 그것은 분명히 너비와 위치가 자동 완성 플러그인에 의해 계산 된 것이므로 내 제안의 폭을 자동으로 맞추기 위해 팝업 제안의 너비를 설정하는 방법이 있습니까?

대단히 감사합니다 ~~ !!

Answer 1

자동 완성 위젯에서 제공하는 open 이벤트에 연결해보십시오. 여기서 제안 사항이 포함 된 div에 대한 참조를 가져 와서 너비를 설정할 수 있습니다.

특히, (나는 종종 IE가 width: auto을 존중에 문제가이 100 % 크로스 브라우저 호환되지 않을 수 있습니다 코멘트에서 언급 한 바와 같이

$("#tags").bind("autocompleteopen", function(event, ui) { 
    var $suggestionsDiv = $(event.target).autocomplete('widget'); 
    $suggestionsDiv.css('width', 'auto'); // may not work cross browser 
}); 

: 다음 코드는 그냥 위의 링크 된 페이지에서 방화범을 사용하여 추가 나를 위해 일한 동적으로 페이지가로드 된 후),하지만 당신은 아이디어를 얻을.

Answer 2

나는 나의 변종이 당신이 원하는 것이 아니라는 것을 알고 있지만 나의 상황에 대한 해결책을 찾는데 지쳤다. 그것은 당신의 것과 너무 가깝다. 마침내 나는 그것을 얻었다. 그래서 내 솔루션이 누군가를 도울 수 있습니다.

내가 원했던 것은 으로 제안 목록의 너비는 입력란의 너비와 동일하게 설정했습니다. 우린 그거야? 예 .. 추천 목록이 정적 인 경우 #ui-id-1과 같은 정적 ID가 있지만 목록을 동적으로 추가하면 #ui-id-4598과 같은 ID가 생성됩니다.

하나의 제안 목록이 순간에서 활성화 된 경우이 변형 가 작동합니다

$('.ui-combobox-input').bind('click autocompleteopen', function(){ 
    var elementWidth = $(this).closest('.ui-combobox').css('width'); 
    //set suggestion list width 
    $('ul.ui-autocomplete:visible').css({"width": elementWidth}); 
}); 

참고 : 위치 및 방법을 동적 ID가 생성 된 I`ve 약간의 jQuery 솔루션을 가지고, 그래서 나는 찾을 돌아가신`t.