JQuery-UI autocomplete search() not displaying DropDownList - javascript

Given the documentation for the search method for the Autocomplete Widget, I would expect a button that calls this method would display a box containing a list of available selections. Nothing happens.
I have the following code that creates the autocomplete widget on a text box:
$("#StateListCoolBox").autocomplete({
source: StateListCoolBoxTags,
focus: function( event, ui ) {
$("#StateListCoolBox").val(ui.item.label);
return false;
},
select: function( event, ui ) {
$("#StateListCoolBox").val(ui.item.label);
$("#StateListCoolBox-id").val(ui.item.value);
return false;
}
});
It works fine.
I have the following code attached to the button I want to display the list. It gets called but nothing happens:
function StateListCoolBox_dropDownClick() {
$("#StateListCoolBox").autocomplete("search", "" );
};
I have tested this with text in the corresponding textbox and with the textbox blank.
How do I get a button to behave like the button on a DropDown Combo, so that when clicked, the list of available selections is displayed?

If you look at the "View Source" for this: http://jqueryui.com/autocomplete/#combobox
You will see:
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "custom-combobox-toggle ui-corner-right" )
.on( "mousedown", function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.on( "click", function() {
input.trigger( "focus" );
// Close if already visible
if ( wasOpen ) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
});
}
So this shows all the results by triggering focus event on the text field.
How do I get a button to behave like the button on a DropDown Combo, so that when clicked, the list of available selections is displayed?
I think this fits what you wanted to accomplish. So Try the following with minLength: 0:
function StateListCoolBox_dropDownClick() {
$("#StateListCoolBox").trigger("focus").autocomplete( "search", "" );
};
That said, there should be nothing wrong with your method:
Triggers a search event and invokes the data source if the event is not canceled. Can be used by a selectbox-like button to open the suggestions when clicked. When invoked with no parameters, the current input's value is used. Can be called with an empty string and minLength: 0 to display all items.
Your current code is simply missing: minLength: 0. Try both if you like.

Related

jQuery Autocomplete - don't fill text input until selected (mouse or enter)

I am using a jQuery autocomplete that connects to a database. Right now if you start typing a term and move your mouse over the populated list the text input with the original term does not change until you click on a list item.
I want the same thing to happen with the keyboard. Don't fill the text box when typing the down arrow. Fill the text box and hidden id at the same time with either enter or mouse click
$(function() {
function log( message ) {
$(".userBookProjId").val(message);
$(".userBookProjId").scrollTop( 0 );
}
$( ".userBookProj" ).autocomplete({
source: "userBookProj.php?userId=" + $('#userId').val(),
minLength: 2,//search after two characters
select: function( event, ui ) {
log( ui.item ? ui.item.id : "");
}
});
});
Any help is greatly appreciated!
You will want to use the focus event.
$(function() {
function log( message ) {
$(".userBookProjId").val(message);
$(".userBookProjId").scrollTop( 0 );
}
$( ".userBookProj" ).autocomplete({
source: "userBookProj.php?userId=" + $('#userId').val(),
minLength: 2,
focus: function(){
return false;
},
select: function( event, ui ) {
log( ui.item ? ui.item.id : "");
}
});
});
focus( event, ui )
Type: autocompletefocus
Triggered when focus is moved to an item (not selecting). The default action is to replace the text field's value with the value of the focused item, though only if the event was triggered by a keyboard interaction.
Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.
See More: http://api.jqueryui.com/autocomplete/
Hope that helps.

How to add links to tabbing order when they're made visible with CSS?

Links that are subject to display: none aren't in the default tabbing order. However, when they're revealed - e.g. CSS for a drop-down menu reveals a sub-menu when a parent link gains focus - they still aren't in the tabbing order. Presumably JavaScript is required, but simply setting tabindex="0" does nothing.
The problem here is that as soon as you tab off the "Top level page with child" link, the CSS is updated and the parent of the anchor becomes display:none before the anchor can receive focus. You will need to use JavaScript to solve this problem and delay the change in the CSS using a timeout until you can determine whether the loss of focus has resulted in the focus shifting to the child element.
Setting tabindex="0" when the parent is display:none will not help, display:none means that the content might as well not be in the document.
I've come up with a solution that basically works: http://codepen.io/gyrus/pen/waKjKv/ There seem to be some issues in IE, I'm working on that. But the general idea is:
Add a small delay before hiding the drop-down
Set a data attribute to flag whether any links inside the drop-down have focus, and check this before hiding
This is just the jQuery, check the pen for more:
jQuery( document ).ready( function( $ ) {
$( '.nav' ).on( 'mouseenter focusin', '.menu-level-0.menu-item-has-children', function( e ) {
var el = $( this );
// Show sub-menu
el.attr( 'aria-expanded', 'true' )
.find( '.sub-menu-wrapper' ).show();
}).on( 'mouseleave focusout', '.menu-level-0.menu-item-has-children', function( e ) {
var el = $( this );
// Only hide sub-menu after a short delay, so links get a chance to catch focus from tabbing
setTimeout( function() {
var smw = el.find( '.sub-menu-wrapper' );
if ( smw.attr( 'data-has-focus' ) !== 'true' ) {
el.attr( 'aria-expanded', 'false' );
smw.hide();
}
}, 100 );
}).on( 'focusin', '.sub-menu-wrapper', function( e ) {
var el = $( this );
el.attr( 'data-has-focus', 'true' );
}).on( 'focusout', '.sub-menu-wrapper', function( e ) {
var el = $( this );
el.attr( 'data-has-focus', 'false' );
// Hide sub-menu on the way out
el.hide().parents( '.menu-level-0' ).attr( 'aria-expanded', 'false' );
});
});

Imagemap: Leave clicked area's tooltip displayed on mouseout?

I am using the plugin Imagemapster to add highlighting and tooltip functions to an image map. It provides callbacks like so:
image.mapster(
{
mapKey: 'name',
listKey: 'name',
onClick: function (e) {
if(!$(this).hasClass('clicked')){
$(this).addClass('clicked');
}
$('#selections').html(xref[e.key]);
},
onMouseover: function (e) {
$('#selections').html(xref[e.key]);
},
onMouseout: function (e) {
if(!$(this).hasClass('clicked')){
$('#selections').html('');
}
},
});
Here is my example:
http://jsfiddle.net/5scbh/6/
If you click an item, I want that item's tooltip to remain displayed even if you mouseout. I'm sort of there, but the problem is: if you click an item, and then mouseover another area and then mouseout... it doesn't keep the clicked item's tooltip on mouseout.
I like that the tooltip changes on mouseover to whatever you rollover, but once you mouseout of that area or the imagemap, I want it to go back to showing the tooltip of whatever area has been clicked. If you unclick the clicked area so that nothing is clicked, then the tooltip should go away.
Can you help me do this? Thank you.
You can store your current tooltip in a data attribute, then write it back on mouse out.
...
onClick: function (e) {
if(!$(this).hasClass('clicked')){
$(this).addClass('clicked');
}
$('#selections').html(xref[e.key]);
$( '#selections' ).data( 'storage', xref[e.key] );
},
...
onMouseout: function (e) {
if(!$(this).hasClass('clicked')){
$('#selections').html('');
}
if( $( '#selections' ).data( 'storage' ) ) {
$( '#selections' ).html( $( '#selections' ).data( 'storage' ) );
};
},
....
updated your fiddle acordingly.
Here is the updated fiddle, using the correct edits provided by #robotroll, as well as the solution to the selecting/deselecting issue described in my comment above.
That part was solved by using this code:
onClick: function (e) {
if (e.selected) {
$(this).addClass('clicked');
$('#selections').html(xref[e.key]);
$('#selections').data( 'storage', xref[e.key] );
} else {
$(this).removeClass('clicked');
$('#selections').removeData();
$('#selections').html('');
}
},
http://jsfiddle.net/5scbh/10/

JQuery Combining Focus and Hover Events

I am having a bit of trouble combining the HOVER and FOCUS events with jquery. This is what I had originally:
$("input,textarea").focus(function () {
$(this).parent().siblings('div.exp').removeClass('hide');
$(this).parent().siblings('div.exp').addClass('show');
});
$("input,textarea").blur(function (){
$(this).parent().siblings('div.exp').removeClass('show');
$(this).parent().siblings('div.exp').addClass('hide');
if ($(this).val().length <= 0) {
$(this).siblings('span.warning').removeClass('hide');
$(this).siblings('span.warning').addClass('show');}
else {
$(this).siblings('span.warning').removeClass('show');
$(this).siblings('span.warning').addClass('hide');
}
});
Basically, I have a user contact form with rows like the one below:
<div class="row">
<p><label>Your Name</label><input type="text" name="name" id="name" value=""/><span class="warning">Your name is missing</span></p>
<div class="exp">Who am I to address?</div>
</div>
The point of my Jquery code is to bring forth a hidden div (exp) when the user focuses any one input or textarea element as well as checking if the value of said input is not empty when unfocusing (blur) the element. (I haven't really gotten down to validation yet so checkin for the string length right now is just a temporary filler). Should the element have a string smaller or equal than 0, then span.warning is to be 'shown' to the user.
This is all working nicely.
Where I get stuck is the following:
I want to add in hover but without conflicting with focus. My desired final effect is this:
You hover any input or textarea and you get the div.exp to show up (exp is for explanation). You focus any input or area and the div.exp stays there, even if you go about hovering any other inputs or textareas. Should you hover an input that is already focused, nothing should happen.
So, in a nutshell, the focus and hover elements should work 'independently' so to speak. Not sure if I made myself clear but oh well, I tried =)
Cheers
G
Your code can be significantly shortened by using .hide() and .show() and chaining the events. I posted a demo here.
$(document).ready(function(e){
// hide all explanations and warnings
$('.exp, .warning').hide();
// add focus, blur and hover events to all inputs & textareas
$('input,textarea')
// if focused, show the explanation
.focus(function(){
// show explanation on focus (and add a class so the hover function knows not to hide it
$(this).addClass('focused').closest('.row')
.find('.exp').show()
.find('.warning').hide();
})
.blur(function(){
// hide explanation on blur
$(this).removeClass('focused').closest('.row').find('.exp').hide();
if ($(this).val().length < 1) {
// input is empty, show the warning
$(this).closest('.row').find('.warning').show();
} else {
// input is not empty, hide the warning... you might want to add the validation here
$(this).closest('.row').find('.warning').hide();
}
})
.hover(function(){
// show explanation when hovered
$(this).closest('.row').find('.exp').show();
},function(){
// hide explanation if the input is not focused
if ($(this).is(':not(.focused)')) $(this).closest('.row').find('.exp').hide();
})
});
You can set a flag to the input or textarea while it is focused to avoid conflict with your hover event. If the flag is set to true when the over or out event is fired, its code is not executed. The following code show the idea (I have not test it).
$("input,textarea").focus( function()
{
$(this).parent().siblings( 'div.exp' ).removeClass( 'hide' ).addClass( 'show' );
$(this).data( "hasFocus", true );
} );
$("input,textarea").blur(function()
{
$(this).parent().siblings( 'div.exp' ).removeClass( 'show' ).addClass( 'hide' );
if( $(this).val().length <= 0 )
$(this).siblings( 'span.warning' ).removeClass( 'hide' ).addClass( 'show' );
else
$(this).siblings( 'span.warning' ).removeClass( 'show' ).addClass( 'hide' );
$(this).data( "hasFocus", false );
});
$("input,textarea").hover( function()
{
// Over event
if( typeof $(this).data( "hasFocus" ) != undefined && !$(this).data( "hasFocus" ) )
$(this).parent().siblings( 'div.exp' ).removeClass( 'hide' ).addClass( 'show' );
},
function()
{
// Out event
if( typeof $(this).data( "hasFocus" ) != undefined && !$(this).data( "hasFocus" ) )
$(this).parent().siblings( 'div.exp' ).removeClass( 'show' ).addClass( 'hide' );
} );

Wordpress core color picker (iris) in widget - refresh when edited in wordpress customizer

I have added the Wordpress Core color picker (iris) to a widget I developed, but when you edit the color, there is no change triggered. As a result, the iframe (live preview) for the customizer does not update unless you trigger a change in another input field.
Javascript to iniitalize the color picker
var myOptions = {
// you can declare a default color here,
// or in the data-default-color attribute on the input
defaultColor: '#000',
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){
},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
// or, supply an array of colors to customize further
palettes: true
};
// Add Color Picker to all inputs that have 'color-field' class
$('.color-field').wpColorPicker(myOptions);
Note:
I tested adding the code below to the change call back.
change: function(event, ui){
$(this).trigger('change');
},
This will trigger a change and update the iframe when the user clicks the color picker, but it happens before the color value is saved.
Does anyone happen to know how to access the event after the color chosen has been saved?
I would appreciate any help.
Thanks!
I'm not sure if this is the best solution, but it's a solution that seems to solve the issue.
add_action( 'admin_footer-widgets.php', array( $this, 'print_scripts' ), 9999 );
public function print_scripts() {
?>
<script>
( function( $ ){
function initColorPicker( widget ) {
widget.find( '.color-field' ).wpColorPicker( {
change: _.throttle( function() { // For Customizer
$(this).trigger( 'change' );
}, 3000 )
});
}
function onFormUpdate( event, widget ) {
initColorPicker( widget );
}
$( document ).on( 'widget-added widget-updated', onFormUpdate );
$( document ).ready( function() {
$( '#widgets-right .widget:has(.color-field)' ).each( function () {
initColorPicker( $( this ) );
} );
} );
}( jQuery ) );
</script>
<?php
}
I believe the workaround here is that you want to activate the ('.color-field').wpColorPicker() -> .on('widget-added widget-updated') as well as when the document is ready.

Categories

Resources