In official documentation page i find below code http://jqueryui.com/autocomplete/#remote
$( "#birds" ).autocomplete({
source: "search.json",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
What i need is after ajax call is made to search.json , I need to store the returned json data from remote in a variable and then call a function.How to do it ? thanks.
Initialize the autocomplete with the response callback specified:
$( ".selector" ).autocomplete({
response: function( event, ui ) {}
});
Bind an event listener to the autocompleteresponse event:
$( ".selector" ).on( "autocompleteresponse", function( event, ui ) {} );
Source: http://api.jqueryui.com/autocomplete/#event-response
Related
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().
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());
}
});
});
i have a jquery slider function and other javascript functions
i would like to retrieve the value of the jquery slider in javascript but i cant
if i do this
var s=$( "#slider_placement" ).slider( "value" );
in javascript it says error
Error: cannot call methods on slider prior to initialization; attempted to call method 'value'
i tried doing this in java script
var h = $('#custom-handle').text();
console.log(h);
but the console shows me empty result
here is the jquery slider code
$( function() {
var handle = $( "#custom-handle_wins" );
$( "#slider_wins" ).slider({
min:1,
max:10,
value:1,
step:1,
create: function() {
handle.text( $( this ).slider( "value" ) );
},
slide: function( event, ui ) {
handle.text( ui.value );
var s=ui.value;
document.getElementById("no_wins").innerHTML='Number of Wins: ' + ui.value;
}
});
s=$( "#slider_wins" ).slider( "value" );
document.getElementById("no_wins").innerHTML='Number of Wins: ' + s;
} );
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();
}
});
I used JqueryUI on this project im working on.
When I focus on the next item in the list with the down arrow key, jqueryui returns the previous selected item
Here's a perfect working sample is here on jsFiddle
Here's the Jquery code
$( "#itemname" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}) );
},
//focus: function(event) { alert( event.type ); }
focus : function(event, ui) {
//alert( $(this).val() );
var item_name_this = $(this).val();
$('#properties_item_name').html(item_name_this);
}
});
focus: function (event, ui) {
var item_name_this = ui.item.value;
$('#properties_item_name').html(item_name_this);
}
Demo --> http://jsfiddle.net/VCd4J/16/