I managed to solve this problem. I found the code in jqueryUI <style> .ui-autocomplete { max-height: 200px; overflow-y: auto; /* prevent horizontal scrollbar */ overflow-x: hidden; /* add padding to account for vertical scrollbar */ padding-right: 20px; } </style> <script> jQuery(“#PeopleName”).autocomplete({ source:[“name1″,”name2″,”…”], minLength:2 }); </script> This is working.
I came across this answer when searching for this same issue, however none of the solutions were exactly what I wanted. Using appendTo worked, sorta… The autocomplete items showed up where they were supposed to, however it completely threw my dialog window into a garbled mess of improperly repositioned div elements. So in my own … Read more
Here’s what worked for me: $(this).data(‘ui-autocomplete’)._trigger(‘select’, ‘autocompleteselect’, {item:{value:$(this).val()}});
The combobox example source is all right there in the example. I’d trigger the change event of the underlying select by modifying the source code like this (changing the select event handler inside autocomplete initialization inside the plugin): /* Snip */ select: function( event, ui ) { ui.item.option.selected = true; self._trigger( “selected”, event, { item: … Read more
You need to transform the object you are getting back into an array in the format that jQueryUI expects. You can use $.map to transform the dealers object into that array. $(‘#dealerName’).autocomplete({ source: function (request, response) { $.getJSON(“/example/location/example.json?term=” + request.term, function (data) { response($.map(data.dealers, function (value, key) { return { label: value, value: key }; … Read more
Try setting the appendTo option to “#copy_dialog”: $(/** autocomplete-selector **/) .autocomplete(“option”, “appendTo”, “#copy_dialog”); This option specifies which element the autocomplete menu is appended to. By appending the menu to the dialog, the menu should inherit the correct z-index.
The only way I can think of doing this is to have a handler listen in on the keypress and click events, and toggle a boolean flag on/off. Then on the focus handler of your input, you can just check what the value of your flag is, and go from there. Probably something like var … Read more
Just a bit later, but $(“#input”).autocomplete({ open: function(event, ui) { $(‘.ui-autocomplete’).off(‘menufocus hover mouseover mouseenter’); } });
Well I never got an answer to my question above so I ended up having to figure it out for myself. I thought I should post the solution I came up with in case there are any other guys out there who are wondering the same thing. First thing you should know is that this … Read more
Are you looking for this selector?: .ui-menu .ui-menu-item a{ background:red; height:10px; font-size:8px; } Ugly demo: http://jsfiddle.net/zeSTc/ Just replace with your code: .ui-menu .ui-menu-item a{ color: #96f226; border-radius: 0px; border: 1px solid #454545; } demo: http://jsfiddle.net/w5Dt2/