jquery-ui-autocomplete

I am using this jQuery UI combobox autocomplete control out of the box off the jQuery UI website: My issue is that I have multiple comboboxes on a page, and I want them to have different widths for each one. I can change the width for ALL of them by adding this CSS: .ui-autocomplete-input { width: 300px; } but I can't figure out a way to change the width on just one of them. Mark A simple $('.ui-autocomplete-input').css('width','300px') works (I tried it on the linked page with Firebug ) to change the first one on the page. You can do something like: $($('.ui-autocomplete-input')[N]).css(

I am referring to this plugin: http://jqueryui.com/demos/autocomplete/ So the original structure for the results is <ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"> <li class="ui-menu-item"> <a class="ui-corner-all">item 1</a> </li> <li class="ui-menu-item"> <a class="ui-corner-all">item 2</a> </li> <li class="ui-menu-item"> <a class="ui-corner-all">item 3</a> </li> </ul> I need to make the links inside to look something like this: <a class="myclass" customattribute="something"> The item </a> Please don't tell me the only solution it to edit the plugin because i

When using the jquery autocomplete plugin , what do you do when the user does not select an item in the list, but instead types a valid value and tabs away? eg when the auto complete list contains: Cat Dog Fish And the user types cat , but does not select Cat from the autocomplete's dropdown list and instead tabs away. Because they did not select any item from the list, the autocomplete select event does not fire, and we lose the chance to respond to it: $('#Animal').autocomplete({ source: url, minlength: 1, select: function (event, ui) { $("#Animal").val(ui.item.value); changeUsersAnimal(ui

I have implemented a jQuery UI Autocomplete box, and rather than being the width of the textbox, the dropdown options are expanding to fill the remaining width of the page. Have a look at this example to see it for yourself: http://jsbin.com/ojoxa4 I have tried setting the width of the list immediately after creating it, like so: $('.ui-autocomplete:last').css('width', $('#currentControlID').width() ); This appears to do nothing. I have also tried setting the width using on-page styles: ui-autocomplete { width: 500px; } This DOES work, amazingly, however it would mean that all autocompletes on

I have added two jQuery UI Dropdown Autocomplete script. Now I want get both value onchange of second dropdown and want to store separately in variable. How it is possible? Any ideas or suggestions? Thanks. My Fiddle: Sample My JS Code: (function($) { $.widget("ui.combobox", { _create: function() { var self = this, select = this.element.hide(), selected = select.children(":selected"), value = selected.val() ? selected.text() : ""; var input = this.input = $("<input>").insertAfter(select).val(value).autocomplete({ delay: 0, minLength: 0, source: function(request, response) { var matcher = new

I'm using the following global jQuery to show and hide a loading div for $.ajax calls: $(document).ajaxStart(function(){ $("#loading").show(); } $(document).ajaxStop(function(){ $("#loading").hide(); } This works fine, but I do not want to show the loading div for autocompletes, so I added this: $("input[type=text]").keydown(function(){ if($(this).hasClass('ui-autocomplete-input')) { window.suppressGlobal = true; } }); Then, to reset suppressGlobal for "normal" $.ajax calls, this: var origAjax = $.ajax; $.ajax = function() { if (window.suppressGlobal) { arguments[0].global = false; } origAjax