We Keep Coding

How to get element triggering the easyautocomplete

I'm using easyautocomplete plugin for my project and I can't get the element which triggered that.
Here is the element:
<input class="form-control product-name" type="text" value="" name="item[0][product_name]" id="item_0_product_name" autocomplete="off">
Here is the jquery code:
$(".product-name").easyAutocomplete({
url: function(phrase) {
return base+getCurrentUrl()+"?phrase=" + phrase;
},
getValue: "product_name",
list: {
onChooseEvent: function() {
console.log($(this).prop("name"));
console.log($(this).attr("name"));
}
},
});
The idea is, I would like to get the element which trigger that plugin and get one of its attribute, for example, the "name". But it always return "undefined" every time I choose an item from the list. I tried to log $(this), but only return "Object", not the input element.
How can I do this? Are there any other way to do this? Any help would be appreciated.

got it :)
with the code below i'm able to get the name of triggered input (work fine in case of multiple instance)
check the use of 'elt'.
$(".form-easyautocomplete").each(function(index,elt){
$(elt).easyAutocomplete({
list: {
onChooseEvent: function () {
console.log(elt.getAttribute('name'),$(elt).getSelectedItemData());
}
}
})
})

Select Text in Input On Focus Bootstrap 3

I have 4 fields for API keys (test and live, secret and public) all with the class of .key
I'm trying to get a select of the input value on focus of the input.
The input looks like so:
<input
type="text"
name="live_public_key"
class="form-control text-center key"
value="API key here"
readonly>
I've searched all over and the common answer to this seems to be something similar to this:
<script>
$(document).on('focus', '.key', function() {
this.select();
});
</script>
But this doesn't work.
It selects the text for a milli-second the deselects it and seems to move the focus back to the input itself.
I don't know if this is a bootstrap thing or if I've coded something wrong.

The field is geting unselected on mouseup. Try this:
$(document).on('focus', '.key', function() {
this.select();
}).on('mouseup', '.key', function(e) {
e.preventDefault();
});
JSFiddle

Use a workaround:
<script>
$(document).on('focus', '.key', function() {
var that = this;
window.setTimeout (function(){
that.select();
}, 100);
});
</script>

Backbone.js: capture custom events on jQuery plugin?

I have a Backbone view for a search form. The form includes several elements, including a slider implemented in jSlider. I want to capture all changes to the form, and update the results shown accordingly.
I can capture the click events fine, but I don't know how to capture the slide event on jSlider - I know how to bind custom events in Backbone, but jSlider seems not to have a way to bind it directly.
Here's my HTML:
<form id="searchform">
<input type="text" id="city" />
<input type="text" id="type" />
<input id="price-jslider" type="slider" name="price" value="1;500" />
</form>
And here's my Backbone code:
var SearchFormView = Backbone.View.extend({
el: $('#searchForm'),
events: {
"click input": "updateResults",
// how to capture slide event on jslider?
},
updateResults: function(e) {
// do stuff
}
});
Does anyone have any ideas on how to capture this sort of event?

You can pass an onstatechange function when initializing the jQuery slider:
var SearchFormView = Backbone.View.extend({
el: $('#searchForm'),
render: function() {
var self = this;
$("#price-jslider").slider({
onstatechange: function( value ) {
self.updateResults();
}
});
},
events: {
"click input": "updateResults"
},
updateResults: function(e) {
// do stuff
}
});

from jslider page
onstatechange function(value)
Function fires while slider change state.
callback function(value)
Function fires on "mouseup" event.
when you instantiate jslider, you define those function in option
$(whatever).jslider({
onstatechange : function(v) {
//set your input value to v
$('#searchForm').trigger('click')
}
})

Inclusion of form tag, submit button on click function is not called

I have a simple html form like this
<table>
<tr><td >Topic: </td> <td> <input type="text" name="Topic"></td></tr>
<tr><td ><button id ="submit">submit</button></td></tr>
</table>
For this form i have implemented backbone.js, part of the code for backbone view is given below.
AppView = Backbone.View.extend({
events: {
"click #submit": "SubmitForm",
},
SubmitForm: function(){
topic = $("#Topic").val();
var subject_model = new App_Form();
subject_model.save();
}
My question is, when i include the form tag in the html form above. On click of the 'submit' button the SubmitForm function is not called. Whereas on exclusion of the form tag the SubmitForm function is called on click of submit button.
Could somebody help with this please!

You should return false; in SubmitForm to prevent actual submitting.
var AppView = Backbone.View.extend({
events: {
"click #submit": "SubmitForm",
},
SubmitForm: function(){
topic = $("#Topic").val();
var subject_model = new App_Form();
subject_model.save();
return false;
}
});

Check to make sure that you've defined an el in your Backbone.View and that the selector in your event map is with the scope of that el.
If the event isn't bound often times its because you've failed to provide a scoped selector.

Simulate an "ontype" event

I want to simulate the Google Search effect that even with the search box not focused, the user can start typing and the input box will capture all keyboard strokes.
I have looked for an ontype event, but haven't found anything. I know that the event object in callbacks for events like click has keyboard information, but I don't think this is what I'm after.

This does the job:
$(document).on('keydown', function() {
$('input').focus();
});

HTML:
<input type="text" id="txtSearch" />
Javascript:
var googleLikeKeyCapture = {
inputField : null,
documentKeydown: function(event) {
var inputField = googleLikeKeyCapture.inputField;
if(event.target != inputField.get(0)) {
event.target = inputField.get(0);
inputField.focus();
}
},
init: function() {
googleLikeKeyCapture.inputField = $('#txtSearch');
$(document).bind('keydown', googleLikeKeyCapture.documentKeydown);
googleLikeKeyCapture.inputField
.focus(function() {
$(document).unbind('keydown');
})
.blur(function() {
$(document).bind('keydown', googleLikeKeyCapture.documentKeydown);
});
googleLikeKeyCapture.init = function() {};
}
};
$(googleLikeKeyCapture.init);
Also you can find jsFiddle example here
EDIT :
And now it's a jQuery plugin. :) If keydown occures in a textarea or input field it doesn't capture keys, anything else goes to designated input field. If your selector matches more than one element it only uses the first element.
Usage: $('#txtSearch').captureKeys();

The event you are after is onkeypress.

Try this jQuery Text Change Event plugin:
http://www.zurb.com/playground/jquery-text-change-custom-event