I have a loading animation which I initially hide in my application.js file:
$('#loading_field').hide();
I have an autocomplete field, and I want the animation to appear when the user starts typing, and for it to disappear when the autocomplete suggestion results appear. Below is my jquery code for the jquery ui autocomplete plugin:
$(".showable_field").autocomplete({
minLength: 1,
source: '/followers.json',
focus: function(event, ui) {
$('.showable_field').val(ui.item.user.name);
return false;
},
select: function(event, ui) {
var video_id = $('#video_id_field').val();
var user_id = ui.item.user.id;
$.post("/showable_videos.js", {video: video_id, user: user_id});
$(':input','#new_showable_video').not(':button, :submit, :reset, :hidden').val('');
return false;
}
});
var obj = $(".showable_field").data('autocomplete');
obj && (obj._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.user.name + "</a>" )
.appendTo( ul );
});
Where should I show and hide the animation?
Well, jQuery UI automatically adds the class 'ui-autocomplete-loading' to your input when it is loading remote data, so the absolute easiest way to do this is to simply put an animated GIF in as the background image on your input when that class is present.
That's what they do in the remote-loaded example on jQueryUI.com (note that you have to type two more more characters to kick off the ajax call in this example).
<style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
Because you're using AJAX to load the suggestions I think this should work for you:
$('#loading_field').ajaxStart(function () {
$(this).show();
}).ajaxStop(function () {
$(this).hide();
});
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'm using the jQuery UI tabs widget and I am trying to show/hide images based on the active widget.
I have a two column layout; left column has the tabs widget with three tabs, right column has the image(s); the image in the right column should swap depending on the active tab. Looking at the api and other posts why wouldn't my code work? How would I do it?
jQuery(function($) {
//turn content into tabs
$( "#tabs" ).tabs();
var active2 = $( "#tabs-2" ).tabs( "option", "active" );
if (active2) {
$(".gala-img1").show();
$(".gala-img2").hide();
$(".gala-img3").hide();
}
});
You can try something like this in your JS :
$( "#tabs" ).tabs({
activate: function (event, ui) {
if (ui.newHeader[0]) {
$(".gala-img" + $(ui.newHeader[0]).attr('data-imgid')).show();
}
},
beforeActivate: function (event, ui) {
if (ui.oldHeader[0]) {
$(".gala-img" + $(ui.oldHeader[0]).attr('data-imgid')).hide();
}
}
});
And put in your tabs-headers the data-imgid of the image you want, like this :
<li data-imgid="X">....</li>
I have an autocomplete field into my website. I just want to display the results inside a <div> tag instead the popup window that the plugin opens natively.
I searched already for solutions for this in other posts, but what they do is to change the position of the "popup" window, and what I want is to replace the content of the <div> with the results, not to put the popup over it.
This is my code :
$('#keyword').autocomplete(
{
source : '/Dev/pages/suivi_searchCompany.php',
select: function( event, ui )
{
console.log(ui.item.value);
loadHisto(ui.item.value);
loadInfosCompanies(ui.item.value);
loadInfosContact(ui.item.value)
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item )
{
console.log('test');
console.log(item);
console.log(ul);
return $( "<li>" )
.append( "<a>" + item.name + "</a>" )
.appendTo( ul );
};
An ugly but maybe sufficient solution might be to simply copy the content of the jquery-ui-generated div to your div and hide the default div:
jQuery:
$('#ui-id-1').bind('DOMSubtreeModified', function() {
$('#mycontainer').html($('#ui-id-1').html());
});
Empty custom div if input is empty:
$('#keyword').keyup(function() {
if($(this).val() == '') {
$('#mycontainer').html('');
}
});
CSS:
#ui-id-1 {
display: none !IMPORTANT;
}
JSFiddle
The ID of the default autocomplete div (#ui-id-1) might vary.
UPDATE:
To add one of the possible options from the dropdown to your textbox, add this:
$('#mycontainer').on('click', 'li', function() {
//add option to textbox
$('#keyword').val($(this).html());
//hide / clear dropdown
$('#mycontainer').html('');
});
See updated fiddle (which I tidied up a bit aswell).
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
This question already has answers here:
JQuery AutoComplete, manually select first searched item and bind click [duplicate]
(2 answers)
Closed 9 years ago.
I am using jquery autocomplete which I am populating from a ruby on rails application and I am creating a custom autcomplete like so:
$.widget( "custom.code_complete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var self = this,
currentCategory = "";
$ul = ul;
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
self._renderItem( ul, item );
});
}
});
$("#r-code").code_complete({
source: "URL",
minLength: 2,
select: function(event, ui) {
$(".button-row").fadeIn();
get_details(ui.item.url);
}
});
I am redirecting a user from another page to the page with the autocomplete form with a parameter in the URL which is a code used for the search, here is the JS to do the search:
function ac_search(code) {
$("#r-code").val(code);
$("#r-code").code_complete('search', code);
}
This performs the search perfectly and displays the drop down list of results. I am trying to have the script then select the first result in the list. I have tried doing it via a selector:
$(".ui-menu-item:first a").click();
This finds the correct element in the autocomplete list but when I try and simulate a click it gives this error:
TypeError: ui.item is null
Is it possible to programmatically click the first item in the autocomplete results list?
Cheers
Eef
$( el ).autocomplete({
autoFocus: true
});
use autoFocus: true
$( el ).autocomplete({
autoFocus: true
...
});