jQuery Autocomplete Plugin 1.2.3 responsive width dropdown

Question

Has anyone used this autocomplete plugin currently in github? when you call the autocomplete function you can pass the width variable in pixels of the dropdown box, ie "width:200,".

I want the dropdown to be the same size as the input field. This works fine when you know the width of the input field, but when using a responsive input field which changes width depending on the device your using, how would you go about setting this to the width of the current input field?

Answer 1

If you're talking about this plugin: https://github.com/devbridge/jQuery-Autocomplete .

I ran into the same problem and made a workaround. I set the width as a fixed value like this:

$('#input').autocomplete({
    width: 780
});

Then whenever the page resizes I run this function:

function page_resize(){
    $('.autocomplete-suggestions').css('width', $('#input').width());
}

Answer 2

I tried quite a few different ways to solve this. I think the best solution I have come across is to set the width to very small size and it will actually resize/adjust to the larger then assigned width.

Example CSS:

.ui-autocomplete {
    max-height: 400px;
    width: 200px; /* just setting it very small it will resize to the input field*/
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    z-index: 1000;
}