The error is caused because of a conflict that occurs when two jQuery UI files are loaded into the client’s browser at the same time. If you peak into your <head> section you will probably see you have two different jQuery UI files referenced there. Just remove one and it will work.
You need to use the ui.item.label (the text) and ui.item.value (the id) properties $(‘#selector’).autocomplete({ source: url, select: function (event, ui) { $(“#txtAllowSearch”).val(ui.item.label); // display the selected text $(“#txtAllowSearchID”).val(ui.item.value); // save selected id to hidden input } }); $(‘#button’).click(function() { alert($(“#txtAllowSearchID”).val()); // get the id from the hidden input }); [Edit] You also asked how to … Read more
In jQuery UI v1.8rc3, the autocomplete widget accepts a source option which can be either a string, an array, or a callback function. If it’s a string, autocomplete does a GET on that URL to get options/suggestions. If an array, autocomplete does a search, as you pointed out, for the presence of the typed chars … Read more
You need to use a different approach for the source call, like this: $(“#product”).autocomplete({ source: function(request, response) { $.getJSON(“product_auto_complete.php”, { postcode: $(‘#zipcode’).val() }, response); }, minLength: 2, select: function(event, ui){ //action } }); This format lets you pass whatever the value is when it’s run, as opposed to when it’s bound.
What parameter is passed to the server You need to pass request.term to your server-side code (from the documentation): A request object, with a single property called “term”, which refers to the value currently in the text input. Basically, in your autocomplete code, you’ll have something like this: $(“#autocomplete”).autocomplete({ // request.term needs to be passed … Read more
The position is right that it is “absolute”, while you need to specify this as an option to autocomplete: $( “.addresspicker” ).autocomplete( “option”, “appendTo”, “.eventInsForm” ); Where it can anchor the box with the results in any element, I have to stop it from being anchored to the form’s class! Here is a working JsFiddle!.
I use this drop-in solution: jQuery.ui.autocomplete.prototype._resizeMenu = function () { var ul = this.menu.element; ul.outerWidth(this.element.outerWidth()); } That’s basically @madcapnmckay’s solution, but that doesn’t need to change the original source.
Add this to your code: ).data( “autocomplete” )._renderItem = function( ul, item ) { return $( “<li></li>” ) .data( “item.autocomplete”, item ) .append( “<a>”+ item.label + “</a>” ) .appendTo( ul ); }; So your code becomes: <script type=”text/javascript”> $(function () { $(“#findUserIdDisplay”).autocomplete({ source: “ui_autocomplete_users_withuname.php”, minLength: 2, select: function (event, ui) { $(‘#findUserId’).val(ui.item.id); return false; } … Read more
Inside your AJAX callback you need to call the response function; passing the array that contains items to display. jQuery(“input.suggest-user”).autocomplete({ source: function (request, response) { jQuery.get(“usernames.action”, { query: request.term }, function (data) { // assuming data is a JavaScript array such as // [“one@abc.de”, “onf@abc.de”,”ong@abc.de”] // and not a string response(data); }); }, minLength: 3 … Read more
The default behavior of the select event is to update the input with ui.item.value. This code runs after your event handler. Simply return false or call event.preventDefault() to prevent this from occurring. I would also recommend doing something similar for the focus event to prevent ui.item.value from being placed in the input as the user … Read more