We Keep Coding

jQuery autocomplete search and select programmatically

I have a data from my controller and when the page loads I want the autocomplete input to search for that data and select it.
I am able to search the data using:
$( "#autocomplete" ).autocomplete( "search", '<?=$ID?>' );
above code works and showing the correct value of autocomplete. Now I cant select the value so that the autocomplete input triggers change. I wanted the input to trigger change because I will auto populate some input.
The way I select the value pro grammatically is :
select: function( event, ui ) {}
Now i found this:
search: function( event, ui ) {},
Is is possible to combine the two?
How to select searched data from auto complete programmatically ?
Update:
This is how my autcomplete works:
$( ".updatedautocomplete" ).autocomplete({
source:function(request,response){
var $this = $(this);
$.post("url",{
term:request.term
}).done(function(data, status){
response($.map( data, function( item ) {
return {
data
}
return false; // Prevent the widget from inserting the value.
}));
});
},
select: function( event, ui ) {
$( this ).attr( 'data-value' , ui.item.id );
$( this ).attr( 'data-asd' , ui.item.sad );
$( this ).val( ui.item.label );
$( "#modal" ).val( ui.item.qwe.trim() );
$( "#modal" ).val( ui.item.asd.trim() );
$( "#modal" ).val( ui.item.zxc.trim() );
$( "#modal" ).val( ui.item.ert.trim() );
$( "#modal" ).val( ui.item.dfg.trim() );
return false;
}
});
The reason why I wanted select event is to populate some input as shown in the source

You simply do jQuery.val() on the input element, like so.
Edit
Since you seem to want to trigger the selection after an asynchronous data retrieval, you probably want the response event and perform the selection there.
response (event, ui)
Triggered after a search completes, before the menu is shown. Useful for local manipulation of suggestion data, where a custom source option callback is not required. This event is always triggered when a search completes, even if the menu will not be shown because there are no results or the Autocomplete is disabled
$(".updatedautocomplete").autocomplete({
source: function(request, response) {
var $this = $(this);
//$.post("url", {
// term: request.term
//})
//.done(function (data, status) {
// response($.map(data, function (item) {
// return {
// data
// }
// return false; // Prevent the widget from inserting the value.
// }));
//
//});
// Simulates some data returned from server
response([
{ label: "Javascript", value: "js" },
{ label: "CSharp", value: "cs" },
{ label: "PHP", value: "php" }
]);
},
response: function(event, ui) {
// Make your preferred selection here
var item = ui.content[0].label;
$(this).val(item).trigger('change');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input class="updatedautocomplete" />
search and select are the events which get triggered when the search is taking place. You don't execute them.
Additionally, I believe the method search (not the event one) is meant rather for "suggesting" users that a value/tag exists in the list and that they need to select it themselves. So, yes, if you need a value programmatically selected (without user interaction) you might need to do it by .val() and optionally .trigger().

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();
}
});

Jquery onchange is not working

<script>
$(document).ready(function(){
$("#customer").autocomplete("barcode.php", {
selectFirst: true
});
});
</script>
<script>
$(document).ready(function() {
$("#customer").change(function (e) {
var item = $("#customer").val();
$.post("add", {"data[Sales][item]": item }, function (data) {
$('#details').html(data);
});});
});
</script>
<input type="text" id='customer' name="data[Sales][customer]" class="input-small focused" autocomplete='off'>
<div id='details'></div>
Autocomplete is working fine . On change is not working properly . If I enter all text without selecting through autocomplte then onchange script is working . If I selected trough autocompleted then I pressed tab key then onchange is not working . Its not showing any result.

Use .keypress instead of change
See documentation of keypress

var item = $("#customer").val(); ---> Change Here.. That's It.

If you are using the jQuery autocomplete plugin then use its onChange method
Ex.
$( ".selector" ).autocomplete({
selectFirst: true,
change: function( event, ui ) {
var item = $("#select01").val();
$.post("add", {"data[Sales][item]": item }, function (data) {
$('#details').html(data);
});
// Add more code here!
}
});

You can use as following:
$("#customer").autocomplete("barcode.php", {
selectFirst: true,
select: function(e, ui) {
alert("selected!");
},
change: function(e, ui) {
alert("changed!");
}
});
$.post("add", {"data[Sales][item]": item }, function (data) {
$('#details').html(data);
});

How to trigger a function upon 'auto complete' done using jquery?

I've populated a text box with list of values using autocomplete option available in jquery. I don't know how to trigger a function after user selected a value from auto complete. Please help me out. Here is my code.
$(function() {
var Product=$( "#tags" ).autocomplete({
source: availableProducts,
change: function(){alert();}
});
Product.autocomplete('option','change').call(Product);
});
It's not calling the alert().

You are missing the comma , Check your console for errors
var Product=$( "#tags" ).autocomplete({
source: availableProducts , <---
change: function(){alert();}

Try this:
$(function() {
$("#tags").autocomplete({
source: availableProducts,
select: function(event, ui) {
event.preventDefault();
alert(1);
}
});