How can I setting the position and width of suggestions in my own in Jquery ui autocomplete?
I am new to jquery ui autocomplete!
I found that the popup suggestion's width just like the input field which binded with autocomplete plugin,but my contents in suggestions may be longer than the width of suggestions popup list window. It was obviously that the width and position was calculate by the autocomplete plugin,so,is there a way to setting the width of popup开发者_如何学Python suggestions to auto fit the width of my contents?
thank you very much~~!!
Try hooking into the open
event provided by the Autocomplete widget. There, you can get a reference to the div that contains the suggestions and set it's width.
e.g. The following code worked for me just adding it using Firebug on the page linked above:
$( "#tags" ).bind( "autocompleteopen", function(event, ui) {
var $suggestionsDiv = $(event.target).autocomplete('widget');
$suggestionsDiv.css('width', 'auto'); // may not work cross browser
});
As noted in the comments, this may not be 100% cross browser compatible (I often have trouble with IE respecting width: auto
, especially dynamically after the page has loaded), but you get the idea.
I know that my variant is not what you want, but I tired to find the solution to my situation, that is so close to your`s, and finally I`ve got it. So may be my solution can help someone.
All I wanted was to set the width of suggestion list is same as width of input field. We have an id for that? Yes.. if list of suggestions is static, we have a static id like #ui-id-1, but if we have dynamicly added list - there would be generated id like #ui-id-4598...
I didn`t find where and how such dynamic id was generated, so I`ve got little jQuery solution:
$('.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});
});
Note that this variant will work if only one suggestion list is active at the moment.
精彩评论