Is there a way you can force jQueryUI autocomplete to display data label rather than data value:
For example
[{"label":"name","value":"1"},{"label":"name3","value":"6"},{"label":"name1","value":"8"},{"label":"name2","value":"10"}]
$( ".auto-search" ).autocomplete({
minLength: 2,
dataType: 'json',
source: tempJson,
focus: function(event, ui){
$('input[name="user-name"]').val(ui.item.label);
},
select: function (event,ui){
$('input[name="user-name"]').val(ui.item.label);
$('input[name="user-id"]').val(ui.item.value);
return false;
}
})
The above code, when you press the down button, displays the value rather than the label. Can it be changed to show the label?
Make sure to return false or prevent the default action of the event from your focus event handler:
focus: function(event, ui){
event.preventDefault();
$('input[name="user-name"]').val(ui.item.label);
},
The callback function is not working on me. so i used a bind event autocompletefocus and worked just fine.
$('input[name="user-name"]').on("autocompletefocus", function (event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
});
Related
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();
}
});
When using keyup keydown to select option from autocomplete list textbox is showing value. But incase of selection from mouse it is working properly.
JsFiddle - http://jsfiddle.net/0c21r1pe/1
$("#promoteActionTextBox").autocomplete({
source: actionNames,
minLength: 0,
select: function (event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
$('#promoteActionError').hide();
$(this).attr('actionId', ui.item.value);
},
change: function (event, ui) {
if (!ui.item) {
$(this).val('');
}
else {
$('#promoteActionError').hide();
$(this).val(ui.item.label);
$(this).attr('actionId', ui.item.value);
}
}
}).focus(function (event, ui) {
event.preventDefault();
$('#promoteActionTextBox').autocomplete("search");
this.value = ui.item.label;
});
change the object property name from value to something else and it works
WORKING DEMO
UPDATE
How about THIS FIDDLE
I added a code which removes the event which is responsible for that effect.
create:function(){
$('.ui-autocomplete').unbind('menufocus');
}
select: function(event, ui) {
event.preventDefault(); // Add on keyboard keyup, keydown is working well
$("#id_value").val(ui.item.value);
$("#id_label").val(ui.item.label);
},
focus: function( event, ui ) {
event.preventDefault(); // Add on keyboard keyup, keydown is working well
$("#id_value").val(ui.item.value);
$("#id_label").val(ui.item.label);
}
I am trying to toggle a series of navigation buttons to react when I disable/enable tabs. However the tabs enable and disable methods don't seem to be firing them (or perhaps the binding is wrong).
This works:
$('body').on('tabsload', '.tabContainer', function (event, ui) {
$(ui.panel).find(".tab-loading").remove();
});
This does not work:
$('body').on('tabsenable', '.tabContainer', function (event, ui) {
debugger;
});
$('body').on('tabsdisable', '.tabContainer', function (event, ui) {
debugger;
});
I am enabling the tabs this way:
$tabContainer.tabs('option', 'disabled', []);
Does this not fire an event? Thanks.
I think the error is set the option disabled and not call a method.
Try this:
$(".tabContainer").tabs('enable');
$(".tabContainer").tabs('disable');
And:
$(".tabContainer").bind("tabsenable", function(event, ui){
// action...
});
$(".tabContainer").bind("tabsdisable", function(event, ui){
// action...
});
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.
$(document).ready(function(){
$("#select3").fcbkcomplete({
json_url: "data.txt",
addontab: true,
maxitems: 10,
input_min_size: 0,
height: 10,
cache: true,
newel: true,
select_all_text: "select",
});
});
i am generating this above code in code behind.
i want to attach a click evet for the selected items and show tooltip on mouse over in autocomplete control in jquery
Thanks in advance
As far as I know, the auto complete plugin renders the hint items in the "div" control. You could try something like
$("#select3 div").click(function() { });
$("#select3 div").title("...");
Hope this could be of some help!!
According to http://docs.jquery.com/UI/Autocomplete, this should work:
$("#select3").fcbkcomplete({
json_url: "data.txt",
addontab: true,
maxitems: 10,
input_min_size: 0,
height: 10,
cache: true,
newel: true,
select_all_text: "select",
focus: function (event, ui) {
//your mouse over event, also includes keyboard arrow key
//ui.item has the focused item data: ui.item.label or ui.item.value
your show tooltip function here.
},
select: function (event, ui) {
//your click event, also includes enter key and tab key to select
//event.target is your item
your click action here.
}
});
Hope this helps.