I am working on a search component in which auto suggestion comes when you type just like google. when i am clicking on autosuggestion it search fine. but when i use enter button instead of click it doesn't work. here is my code for click
function initSearchAutoClickable(resize, emchange){
$("body").on("click", ".ui-menu-item > a", function (event) {
$('.search .search-go').trigger('click');
});
}
Does anyone have idea how to make the same for enter button. .search-go is button on which search fires
Use keyup event and check the pressed button by keyCode or which
$("body").on("keyup", ".ui-menu-item > a", function (event) {
if(event.which == 13 || event.keyCode == 13){
$('.search .search-go').trigger('click');
}
});
Write code with :
$(document).keypress(function (event) {
if (event.which == 13) //Event for "Enter" key
{
//Write your code here.
}
});
If I understood you, you want to run the same code but when you press Enter, right?
So you need to do:
// Attach event Keypress to your search text box
$(someElementWhereYouPressEnter).on('keypress', onKeyPress);
// Handle keypress - check if is enter
function onKeyPress(e) {
if ( e.which == 13 ) {
// handle Enter press
$('.search .search-go').trigger('click');
}
}
Hope this will help you.
Here u have example. This must work.
http://jsfiddle.net/TDf9p/
Look on this:
$(Input).autocomplete({
source: function (request, response) {
do something
},
select: function (event, ui) {
do something
}
, change: function (event, ui) {
do something
}
, focus: function (event, ui) {
do something
}
Try use some event and do what u need in event. Debug your code and look when u want do something.
If this not help look here:
http://api.jqueryui.com/autocomplete/#event-search
Related
I've a simple form with a text input and a button disabled, this button can be enabled if i write on input text, keyup() is the best way but when i use right click and paste this event isn't called and doesn't trigger that event. So i tried event change(), it's work but not immediately, i must unfocus the input text for have the button enabled. How can i enable this button immediately with copy and paste?
$(document).ready(function () {
$('#id_input').bind('keyup paste click', function () {
if ($('#id_input').val().length === 6 ){
$('#btnSubmit').removeAttr('disabled');
}
else
$('#btnSubmit').attr('disabled', 'disabled');
});
});
Rory is right that your code should work in general especially if you paste using Ctrl + V.
I assume that you experience the issue only if you paste using right-click and then select Paste from the context menu.
Try to monitor the property changes:
$(document).ready(function() {
$('#id_input').bind('input propertychange', function() {
if ($('#id_input').val().length === 6) {
$('#btnSubmit').removeAttr('disabled');
} else
$('#btnSubmit').attr('disabled', 'disabled');
});
});
You need to use the onpaste event.
$(document).ready(function () {
$('#id_input').bind('keyup onpaste click', function () {
if ($('#id_input').val().length === 6 ){
$('#btnSubmit').removeAttr('disabled');
} else {
$('#btnSubmit').attr('disabled', 'disabled');
}
});
});
I use the native HTML date pickers. I want to achieve that the parent form is submitted when a date is selected by the datepickers browsers provide.
If the date is input by keyboard, I only want to submit if the enter key is pressed or on focusout.
Now my problem is that I cannot distinguish between date picker input and keyboard input, at least in Firefox. Some examples:
$(this).on('input', function(event) {
console.log(event.type);
}
This always logs 'input', no matter what I do - I would have expected that to be either "click" or "keydown" or something alike.
The on('click') handler only fires when I click on the input field, not when I click something in the date picker...
Can someone push me in the right direction?
Thanks alot
Philipp
I did a workaround which is close to what I want:
$('#eooMainForm input[type="date"]')
.each(function() {
$(this).data('serialized', $(this).serialize());
$(this).on('focusout', function() {
if($(this).serialize() != $(this).data('serialized')) {
$("#eooMainForm").form('submit');
}
});
$(this).on('keypress', function(event) {
$(this).data('byKeyPress', 1);
});
$(this).on('click', function(event) {
$(this).data('byKeyPress', 0);
});
$(this).on('change', function(event) {
//if change was done by date picker click
if($(this).data('byKeyPress') != 1 && $(this).serialize() != $(this).data('serialized')) {
$("#eooMainForm").form('submit');
}
});
});
So a keypress event listener sets the "flag" "byKeyPress" to 1, while a click events listener sets it to zero. This way, I can determine in the change event listener what caused the change.
The only situation where this does not work is when a user starts typing the date but then selects it by clicking the datepicker. I can live with that.
You'll need to attach an event which supports both event types. Using JQuery: $('a.save').bind('mousedown keypress', submitData(event, this));
Then create a JS condition:
function submitData(event, id)
{
if(event.type == 'mousedown')
{
// do something
return;
}
if(event.type == 'keypress')
{
// do something else
return;
}
}
You can find all the list of event in this image.
$('input').on('blur', function(event) {
alert(event.type);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
You can apply all event like the above example. Above example applied blur event on input.
I have keyup/down events binded to the document. The Keydown will only fires every second time, without me knowing why. I tried many suggestions given on similar SO-Questions, but none of them works.
My Javascript:
$(document).on('keyup', function() {
$('div').removeClass('bar');
});
$(document).on('keydown', function(e) {
if(e.altKey) {
$('div').addClass('bar'); // only every second hit will add the class
}
});
This should point out the issue:
http://jsfiddle.net/6yxt53m9/1/
You need to add return false; to the key press functions:
$(document).on('keyup', function() {
$('div').removeClass('bar');
return false;
});
$(document).on('keydown', function(e) {
if(e.altKey) {
$('div').addClass('bar');
}
return false;
});
Updated fiddle.
use
$(document).on('keyup', function(e) {
$('div').removeClass('bar');
e.preventDefault();
});
e.preventDefault(); will reset the input
Try this.
$(document).on('keydown', function(e) {
e.preventDefault();
if(e.altKey) {
$('div').addClass('bar'); // only every second hit will add the class
}
});
The reason is alt key occurs focus moving to button of "customize and control google chorome"
focusout on input field will trigger every time the specific input looses its focus.
But, I want to exclude some specific a tag from triggering that focusout function
Example:
<input type="text" id="name_input">
<a id="apply_name">SAVE</a>
Then the focusout function:
$("#name_input").focusout(function(e) {
//do something here
});
Clicking on "#apply_name" also triggers focusout function of an input. How can I exclude that specific element ID from triggering it.
Note: I tried some tricks already posted on StackOverflow and none of them seams to work...
Another way of doing this is checking what your target id is
var evt;
document.onmousemove = function (e) {
e = e || window.event;
evt = e;
}
$("#name_input").focusout(function (e) {
if (evt.target.id == "apply_name") {
//apply_name clicked
} else {
//focus out and applyname not clicked
}
});
DEMO
You can use "blur" - event.
$("#name_input").on("blur", function(e) {
//your code
});
Solution from How to exclude Id from focusout
Added .hasClass which I also needed:
$('#id').focusout (function (e) {
if (e.relatedTarget && $(e.relatedTarget).hasClass('dontFocusOut')) {
return;
}
//do your thing
});
I have a set of fields. In read mode, they display as text within a table cell. Double clicking the cell puts the record in edit mode. Pressing "enter" while in edit mode commits the change. Pressing "esc" in edit mode returns to read mode without changing the data.
Now, each field has a jQuery UI autocomplete control added. When the autocomplete menu is visible, I want "enter" to behave as it normally does for autocomplete (replace the value in the input with the selected menu value and close the autocomplete menu) without commiting the change/returning to edit mode. And when pressing escape, if the menu is open, perform the usual autocomplete functions (return the edit field to its previous value and close the menu) without returning to read mode.
I have placed a demo of my problem here. Currently, if you press "enter" on one of the autocomplete menu items, autocomplete does its thing AND the changes are committed immediately. Pressing escape closes the autocomplete menu AND cancels edit mode.
Use the open and close events of the autocomplete to unbind/rebind your custom behavior so that it occurs only when the autocomplete menu is not open. This will keep the events from getting confused. My working code follows:
function enterEditMode() {
$("#output").append("<div>enter edit</div>");
$("#read").hide();
$("#edit").val($("#read").text()).show().focus();
}
function exitEditMode() {
$("#output").append("<div>exit edit</div>");
$("#read").show();
$("#edit").hide();
}
function commitChanges() {
$("#output").append("<div>commit</div>");
$("#read").text($("#edit").val());
exitEditMode();
}
function handleKeydown(event) {
$("#output").append("<div>handle keydown:"+event.which+"</div>");
if (event.keyCode === 27) { exitEditMode(); }
else if (event.keyCode === 13) { commitChanges(); }
}
$(function() {
$("#read").bind("dblclick", enterEditMode);
$("#edit").bind("keydown", handleKeydown).autocomplete({
source: ["this", "that", "the other"],
open: function(){ $("#edit").unbind("keydown", handleKeydown); },
close: function(){ $("#edit").bind("keydown", handleKeydown); }
});
});
The working jsfiddle is here.
You can use the select and close events to renter edit mode
close: function(event, ui) { enterEditMode()},
select: function(event, ui) { enterEditMode()}
Here they are in your code:
function enterEditMode() {
$("#read").hide();
$("#edit").show().focus();
}
function exitEditMode() {
$("#read").show();
$("#edit").hide();
}
function commitChanges() {
$("#read").text($("#edit").val());
exitEditMode();
}
$(function() {
$("#read").dblclick(enterEditMode);
$("#edit").keydown(function(event) {
if (event.keyCode === 27) exitEditMode();
else if (event.keyCode === 13) commitChanges();
}).autocomplete({
source: ["this", "that", "the other"],
close: function(event, ui) { enterEditMode()},
select: function(event, ui) { enterEditMode()}
});
});
Working Example:
http://jsfiddle.net/9unaU/6/
Update:
Made another change to ensure autocomplete is hidden on exitEditMode
function exitEditMode() {
$("#read").show();
$("#edit, .autocomplete").hide();
}
Working Example:
http://jsfiddle.net/9unaU/7/
Update 2:
Edited the if statement so it only commits if the autocomplete is hidden
if (event.keyCode === 27) exitEditMode();
else if (event.keyCode === 13 && ($('.autocomplete').is(':hidden'))) commitChanges();
Working Example 2:
http://jsfiddle.net/9unaU/10/