jQuery UI 자동 완성 너비가 올바르게 설정되지 않음

jQuery UI 자동 완성 너비가 올바르게 설정되지 않음

---

jQuery UI 자동 완성 상자를 구현했으며 텍스트 상자의 너비가 아니라 드롭 다운 옵션이 확장되어 페이지의 나머지 너비를 채 웁니다.

이 예제를 직접 확인하십시오 : 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());
}

기본적으로 @madcapnmckay 의 솔루션이지만 원본 소스를 변경할 필요는 없습니다.

---

문제는 메뉴가 기본적으로 본문 인 부모 요소의 너비를 채우기 위해 확장된다는 것입니다. 올바른 너비의 포함 요소를 제공하여 수정할 수 있습니다.

먼저 다음 <div>과 같이 추가했습니다 .

<div id="menu-container" style="position:absolute; width: 500px;"></div>

절대 위치 지정을 통해 <div>문서 흐름을 중단하지 않고 입력 직후 에 배치 할 수 있습니다 .

그런 다음 자동 완성을 호출 할 때 appendTo옵션에 인수를 지정 하여 메뉴가 my에 추가되어 <div>너비를 상속합니다.

$('#myInput').autocomplete({ source: {...}, appendTo: '#menu-container'});

이것은 문제를 해결합니다. 그러나 플러그인이 올바르게 작동하는 것보다 이것이 왜 필요한지 여전히 알고 싶습니다.

---

나는 자동 완성 코드를 파고 들었고 범인은이 작은 역병입니다.

_resizeMenu: function() {
    var ul = this.menu.element;
    ul.outerWidth( Math.max(
        ul.width( "" ).outerWidth(),
        this.element.outerWidth()
    ) );
},

ul.width ( "")가 무엇을해야하는지 잘 모르겠지만 ui.width ( ""). outWidth ()는 항상 ul이 추가 된 것이기 때문에 본문의 너비를 반환합니다. 따라서 너비는 요소 너비로 설정되지 않습니다 ....

어쨌든. 수정하려면 간단히 코드에 추가하십시오.

$element.data("autocomplete")._resizeMenu = function () {
        var ul = this.menu.element;
        ul.outerWidth(this.element.outerWidth());
}

이것은 버그입니까?

편집 : 누군가가 버그에 대한 축소 된 테스트 사례를보고 싶다면 여기에 있습니다.

---

오래 전부터 답변을 받았지만 더 나은 해결책이 있다고 생각합니다.

$(".autocomplete").autocomplete({
    ...
    open: function() {
        $("ul.ui-menu").width( $(this).innerWidth() );
        ...
    }
    ...
});

그것은 나를 위해 잘 작동했습니다.

---

나는 이것이 오래 전에 대답되었음을 알고 있지만 같은 문제에 부딪 혔습니다. 내 해결책은 위치를 추가하는 것이 었습니다.

---

오픈 이벤트에서 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
            }
        })

---

I ran into this issue as well but realized that I just forgot to include a reference to the jquery.ui.autocomplete.css style sheet. Did you include that style sheet in your layout/master page?

---

$("#autocompleteID").autocomplete({
source: "http://myhost/magento/js/jquery/ui/php/ville.php",
minLength: 1,
open: function(event, ui)
{
   $("#autocompleteID").autocomplete ("widget").css("width","300px");  
} 
});

---

Well, Ender. I don't know if my solution can help you or not, but with Jqueryui remote-with-cache.html it worked. I just put in the size property in the text box.

Please see the code below:

<div class="demo">
    <div class="ui-widget">
        <label for="birds">Birds: </label>
        <input id="birds" size="30"/>
    </div>
</div>

---

If you are using the official jQuery ui autocomplete (i'm on 1.8.16) and would like to define the width manually, you can do so.

If you're using the minified version (if not then find manually by matching _resizeMenu), find...

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

...and replace it with (add this.options.width|| before Math.max) ...

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

... you can now include a width value into the .autocomplete({width:200}) function and jQuery will honour it. If not, it will default to calculating it.

---

I know this has long since been answered, but the easiest way I find is to use the id of the autocomplete, and to set the width to 100px you would call

$('.ui-autocomplete-input#MyId').css('width', '100px');

after you finish your $('#MyId').autocomplete(...); call. This way you don't end up tying the order of your autocomplete textboxes in your DOM to your script.

---

In case you not are able to set the width dynamically and nothing at all works try to include this

http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.autocomplete.css?spec=svn3882&r=3882

either in a linked sheet or hardcoded and set the parameters here.

It worked for me after trying everything else

---

My solution was to append the autocomplete to a div with an id, and they set CSS for that specific ul:

jQuery/JavaScript:

$("input[name='search-text]").autocomplete({
    appendTo: "#item-search-autocomplete",
    source: ....
});

CSS:

#item-search-autocomplete .ui-autocomplete {
    width: 315px;
}

Works like a charm.

---

If you like to use css try this:

.ui-widget-content.ui-autocomplete {
    width: 350px;
}

It will work on every autocomplete input.

---

I have this in my css file, so the autocomplete takes the width of the styled span:

 span input.ui-autocomplete-input {
     width: 100%;
 }

---

I faced the same issue and resolved it by using this piece of code, though it is a little hit and trial kind of thing, but it works, I was not being able to set the width so I decided to set the max-width property.

  $('.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

See what works best for you.Hope this helps.

---

There is a width option for the autocomplete. I use it for 1.3.2.

$('#mytextbox').autocomplete(url, {  
        width: 280,
        selectFirst: false,
        matchSubset: false,
        minChars: 1,
        extraParams:{myextraparam:myextraparam},
        max: 100
    });

참고URL : https://stackoverflow.com/questions/5643767/jquery-ui-autocomplete-width-not-set-correctly