jQuery UI 자동 완성 너비가 올바르게 설정되지 않음
저는 jQuery UI Autocomplete 박스를 구현했고, 텍스트 박스의 폭이 아닌, 드롭다운 옵션이 페이지의 나머지 폭을 채우도록 확장되고 있습니다.
이 예를 직접 확인해 보십시오. http://jsbin.com/ojoxa4
목록을 작성한 후 바로 너비를 설정해 보았습니다.
$('.ui-autocomplete:last').css('width',
$('#currentControlID').width()
);
이것은 아무 소용이 없는 것 같습니다.
또한 페이지의 스타일을 사용하여 너비를 설정해 보았습니다.
ui-autocomplete { width: 500px; }
이 방법은 놀랍게도 효과가 있지만, 한 페이지의 모든 자동 완성은 동일한 너비여야 하며, 이는 이상적이지 않습니다.
각 메뉴의 폭을 개별적으로 설정하는 방법이 있습니까?또는 더 나은 이유로 폭이 제대로 작동하지 않는 이유를 설명해 줄 수 있는 사람이 있습니까?
이 드롭인 솔루션을 사용합니다.
jQuery.ui.autocomplete.prototype._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
그것이 기본적으로 @madcapnmcay의 해결책이지만, 그것이 원래의 소스를 바꿀 필요는 없습니다.
문제는 메뉴가 기본적으로 본문인 부모 요소의 폭을 채우기 위해 확장되고 있다는 것입니다.이는 올바른 너비의 요소를 포함하여 수정할 수 있습니다.
처음에 나는 a를 추가했습니다.<div>다음과 같습니다.
<div id="menu-container" style="position:absolute; width: 500px;"></div>
절대적인 위치 설정을 통해<div>문서 흐름을 중단하지 않고 입력 직후에 바로 실행할 수 있습니다.
그런 다음 autoccomplete를 호출하면 다음과 같이 지정합니다.appendTo옵션의 인수로 인해 메뉴가 내 것에 추가됩니다.<div>, 따라서 너비를 상속합니다.
$('#myInput').autocomplete({ source: {...}, appendTo: '#menu-container'});
그러면 문제가 해결됩니다.하지만 저는 플러그인이 제대로 작동하는 것보다 이것이 왜 필요한지 알고 싶습니다.
이것이 답변된 지 오래되었다는 것을 알지만, 더 나은 해결책이 있다고 생각합니다.
$(".autocomplete").autocomplete({
...
open: function() {
$("ul.ui-menu").width( $(this).innerWidth() );
...
}
...
});
저한테는 잘 됐어요.
자동 완성 코드를 뒤져봤는데 범인은 이 작은 비행사에요
_resizeMenu: function() {
var ul = this.menu.element;
ul.outerWidth( Math.max(
ul.width( "" ).outerWidth(),
this.element.outerWidth()
) );
},
뭐가 뭔지 모르겠어요.width (" )"는 but ui를 수행하는 것으로 가정합니다.width("".outWidth()는 항상 본문의 너비를 반환합니다. 왜냐하면 이 너비는 ul에 추가되기 때문입니다.따라서 너비가 요소 너비로 설정되지 않습니다.
어쨌든 수정하려면 코드에 이것을 추가하기만 하면 됩니다.
$element.data("autocomplete")._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
이거 벌레예요?
편집: 버그에 대한 축소된 테스트 케이스를 보고 싶은 사람이 있다면 여기 있습니다.
오픈 이벤트에서 CSS 설정!
$('#id').autocomplete({
minLength: 3,
source: function(request, response) {
$.ajax({
url: "myurl",
dataType: "json",
type: 'POST',
data: {
'q': request.term,
'maxRows': 15
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.name,
}
})),
}
})
},
select: function(event, ui) {
$("#id").val(ui.item.label);
},
focus: function ( event, ui ){
$form.find('#id').val(ui.item.label);
return false;
},
open: function(){
$('.ui-autocomplete').css('width', '300px'); // HERE
}
})
이것은 이미 오래 전에 답변이 된 것으로 알고 있지만, 저도 같은 문제에 부딪혔습니다.내 해결책은 위치를 추가하는 것이었습니다: 절대적
저도 이 문제에 부딪혔지만 jquery.ui에 대한 참조를 포함하는 것을 잊어버렸다는 것을 깨달았습니다.autoccomplete.slaystyle sheet.그 스타일 시트를 레이아웃/마스터 페이지에 포함했습니까?
$("#autocompleteID").autocomplete({
source: "http://myhost/magento/js/jquery/ui/php/ville.php",
minLength: 1,
open: function(event, ui)
{
$("#autocompleteID").autocomplete ("widget").css("width","300px");
}
});CSS를 사용하려면 다음을 시도해 보십시오.
.ui-widget-content.ui-autocomplete {
width: 350px;
}
모든 자동 완료 입력에서 작동합니다.
공식 jQuery ui autocomplete(1.8.16에 있음)를 사용하고 있고 수동으로 너비를 정의하려면 이렇게 할 수 있습니다.
축소 버전을 사용하는 경우(사용하지 않는 경우 _resizeMenu를 일치시켜 수동으로 찾음), 다음을 찾습니다.
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
...으로 대체합니다(이것을 추가합니다.width|| math.max 앞) ...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
... 이제 .autoccomplete({width:200}) 함수에 너비 값을 포함할 수 있으며 jQuery는 이 값을 준수합니다.그렇지 않으면 기본값으로 계산됩니다.
이것이 답변된 지 오래되었다는 것을 알지만, 제가 찾는 가장 쉬운 방법은 자동완성의 id를 사용하는 것이고, 당신이 호출할 수 있는 폭을 100px로 설정하는 것입니다.
$('.ui-autocomplete-input#MyId').css('width', '100px');
당신이 당신의 것을 끝마친 후에$('#MyId').autocomplete(...);이렇게 하면 DOM에 있는 자동 완성 텍스트 상자의 순서를 스크립트와 연결하지 않게 됩니다.
폭을 동적으로 설정할 수 없고 어떤 작업도 이를 포함하려고 하지 않을 경우
http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.autocomplete.css?spec=svn3882&r=3882
링크된 시트 또는 하드코딩된 상태에서 여기에 파라미터를 설정합니다.
다른 것을 다 해보고 나서 효과가 있었습니다.
◦ 엔더. 내 로 작동했습니다제 솔루션이 도움이 될지는 모르겠지만 Jqueryui remote-with-cache.html을 사용하면 효과가 있었습니다.는 방금.size텍스트 상자의 속성을 입력합니다.
아래 코드를 참조하시기 바랍니다.
<div class="demo">
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds" size="30"/>
</div>
</div>
내 해결책은 ID를 가진 디브에 자동완성을 추가하는 것이었고, 그들은 그 특정 ul에 대한 CSS를 설정했습니다.
jQuery/JavaScript:
$("input[name='search-text]").autocomplete({
appendTo: "#item-search-autocomplete",
source: ....
});
CSS:
#item-search-autocomplete .ui-autocomplete {
width: 315px;
}
매력적으로 작용합니다.
내 문제는 (jQuery UI 버전 1.13.1에서) 이 두 줄을 추가하는 것만으로 해결되었습니다..ui-autocomplete급
.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
/* my added style */
word-wrap: break-word;
width: 0;
/* my added style */
}
저는 같은 문제에 직면했고 이 코드 조각을 사용하여 해결했습니다. 비록 약간 히트하고 시험적인 것이지만, 효과가 있습니다. 저는 폭을 설정할 수 없어서 설정을 하기로 결정했습니다.max-width소유물.
$('.ui-autocomplete').css('margin-left','25%') //center align
$('.ui-autocomplete').css('max-width','38%') //hit and trial
$('.ui-autocomplete').css('min-width','38%') //hit and trial
당신에게 가장 적합한 것이 무엇인지 확인해 보십시오.도움이 되길 바랍니다.
자동 완성에는 너비 옵션이 있습니다.1.3.2용으로 씁니다.
$('#mytextbox').autocomplete(url, {
width: 280,
selectFirst: false,
matchSubset: false,
minChars: 1,
extraParams:{myextraparam:myextraparam},
max: 100
});
는 이것을 내 파일에 있기 은 는 을 에 cs 은 은 에 을 는 width의 span:
span input.ui-autocomplete-input {
width: 100%;
}
언급URL : https://stackoverflow.com/questions/5643767/jquery-ui-autocomplete-width-not-set-correctly
'programing' 카테고리의 다른 글
| 요소 이름에 대한 대소문자 규칙? (0) | 2023.09.17 |
|---|---|
| Sql Server 2005 dbo 로그인 이름 변경하는 방법 (0) | 2023.09.17 |
| NodeJs : TypeError : require(...)가 함수가 아닙니다. (0) | 2023.09.17 |
| 시각적 코드에서 Undefined type 오류가 발생하지 않도록 전역 클래스를 선언하는 방법 (0) | 2023.09.17 |
| 게시/구독 패턴(JS/jQuery)을 사용하는 이유는 무엇입니까? (0) | 2023.09.17 |