We Keep Coding

Get value of hidden input populated by jQuery autocomplete

I am using a jQuery Autocomplete to populate a list of names from a database and then assign the compId number to a hidden input.
I want to be able to access the compId value as soon as the user selects a company and assign it to a variable that I can use in conjunction with PHP and a MySQL statement prior to the user moving on.
Here is the jQuery:
$(function() {
function log( message ) {
$("#compId").val(message);
$( "#compId" ).scrollTop( 0 );
}
$( "#companyForm" ).autocomplete({
source: "/autoComp/companies.php",
minLength: 2,//search after two characters
select: function( event, ui ) {
log( ui.item ? ui.item.id : "");
}
});
});
HTML:
<input type="hidden" id="compId" name="compId" required />
The autocomplete is working fine, just don't know how to access it immediately after the value is filled.
Thanks!

Apologies if I misunderstood what you are asking but there is a response event you can chain on to your autocomplete call like so:
http://api.jqueryui.com/autocomplete/#event-response
$(function() {
function log( message ) {
$("#compId").val(message);
$( "#compId" ).scrollTop( 0 );
}
$( "#companyForm" ).autocomplete({
source: "/autoComp/companies.php",
minLength: 2,//search after two characters
select: function( event, ui ) {
log( ui.item ? ui.item.id : "");
},
response: function () {
alert($("#compId").val());
}
});
});

Remove/Hide autocomplete list item? [duplicate]

This is rather a simple question, but how do I disable the dropdown of the jQuery Autocomplete? When a user starts typing, I run my own function on the response callback. I don't need anything else to appear. This is what I have:
$( "#search" ).autocomplete({
source: "/app/friends",
minLength: 2,
response: function( event, ui ) {
$(".ui-menu-item").hide(); //i hoped this would work
display(ui.content);
}
});

According to the documentation for the plugin, there is an open event that fires when the menu opens. You can put some code in that event to hide the drop down:
$( "#search" ).autocomplete({
source: "/app/friends",
minLength: 2,
response: function( event, ui ) {
display(ui.content);
},
open: function( event, ui ) {
$(".ui-autocomplete").hide();
}
});

How to get event when clicking on selected item in JqueryUI Selectmenu

I have the following code:
$( "#software" ).on( "selectmenuchange" , function ( e, ui ) {
// do some stuff
});
When clicking on the already selected item, nothing happens because it doesn't change. How can I conver this case too?

$( ".selector" ).selectmenu({
open: function( event, ui ) {
//on open event
},
select: function( event, ui ) {
//on select event
}
});

Custom Autocomplete with jquery

I am working on jquery autocomplete custom data and display.I want to display some static dropdown on keypress in textbox.when user select that list item i want to add it to textbox.
the code which i have tested is
$('#uinput').keyup(function() {
var val = $('#uinput').val();
if(val.length>1) { // check length
// handle successful DWR response
//alert(data);
var b=[{value: "jquery-ui",
label: "jQuery UI",}];
$('#uinput').autocomplete({source:b,
select: function( event, ui ) {
$( "#uinput" ).val( ui.item.label+"="+document.getElementById('uinput').value );
return false;
}
}).data("autocomplete")._renderItem = function( ul, item ) {
return $( "<li>" )
.data('item.autocomplete', item)
.append( "<a>" + item.label + "=" + document.getElementById('uinput').value + "</a>" )
.appendTo( ul );
};
} else {
$('#uinput').autocomplete([]); // clean
}
});
For reference what i want to do
custom autocomplete

I'm not exactly sure what you're trying to accomplish but I think I've put together this example that I think might help you
https://jsfiddle.net/mgxnxhs8/5/
here's my javascript
$(function () {
var availableTags = [{
label: "jQuery 1.9.1",
value: "http://code.jquery.com/jquery-1.9.1.js",
}, {
label: "jQuery 2.1.4",
value: "http://code.jquery.com/jquery-2.1.4.js",
}];
$('#uinput').autocomplete({
source: availableTags,
minLength: 0,
select: function (event, ui) {
$('#uoutput').val(ui.item.value);
return false;
}
}).focus(function () {
$(this).autocomplete("search");
});
});
The dropdown opens up when you enter the textbox and displays the "label" key of the tags. On Select(), it sets the value of another textbox to the "value" key of the selected tag.
Let me know if theres something I missed. Hope this helps

Select first jquery UI result automatically

I am using jQuery Autocomplete to search a local database of cities. Here is the code:
$('#txt_search_city').autocomplete({
source: url,
delay: 0,
autoFocus: true,
select: function( event, ui ) {
$( "#id_city" ).val( ui.item.id );
$(this).closest('form').submit();
},
focus: function( event, ui ) { event.preventDefault(); }
});
I'd like the first returned value to be selected by default (like it works on facebook). So essentially, if they just hit enter they will trigger the selection of the first result.
I thought that's what autoFocus: true did, but it isn't working. Not showing errors, just not selecting the first result.
Thoughts?

Autofocus will highlight the first record..
Your code would then just need to include autoFocus: true, like below:
$('#txt_search_city').autocomplete({
source: url,
delay: 0,
autoFocus: true,
select: function( event, ui ) {
$( "#id_city" ).val( ui.item.id );
$(this).closest('form').submit();
},
focus: function( event, ui ) { event.preventDefault(); }
});

This seems to be outdated. I had the same problem.
Just use .autocomplete({autoFocus: true})
I'm using jquery-ui-1.10.0.min and it works now.
No plug is needed.