jQuery is new to me, thanks for bearing with me.
I have some text inputs in HTML:
<input type="text" class="NameTextID" id="fn.1">
<input type="text" class="NameTextID" id="ln.1">
<input type="text" class="EmailAddressTextID" id="ea.1">
Two inputs are of class NameTextID and one is of class EmailAddressTextID. Notice each id is unique.
I then would like to leverage jQuery's autocomplete function on any DOM item with a class from above.
$(document).ready(function() {
$(function() {
$( ".NameTextID" ).autocomplete({
source: recEngineNames,
minLength: recMinCharCount,
select: recEngine
});
$( ".EmailAddressTextID" ).autocomplete({
source: recEngineEmails,
minLength: recMinCharCount,
select: recEngine,
});
});
});
Now, in the function recEngine:
var recEngine = function(event, ui) {
var selected_value = ui.item.value
var selected_id = ????
}
jQuery passes two parameters, how can I obtain the id if the ui item that activated the recEngine function?
Thanks in advance!
You can just do:-
var selected_id = this.id;
where this refers to the current element being referred to.
You can acces it like this:
ui.item.id
First thing you can use multi selectors by separating by a comma ','.
Then to get the element where that fired the event you can use the key word this or event.target.
To get its id you can use $(event.target).attr('id')
$(event.target).attr('id')
$(document).ready(function() {
$(function() {
$( ".NameTextID, .EmailAddressTextID" ).autocomplete({
source: recEngineNames,
minLength: recMinCharCount,
select: recEngine
});
});
});
var recEngine = function(event, ui) {
var selected_value = ui.item.value;
var selected_id = $(event.target).attr('id');
}
Related
Demo and full code is like this :
http://jsfiddle.net/9R4cV/685/
I using like this :
$('#customer').on('change', function() {
$('#customer_copy').val($(this).val());
});
But it's not working
Any solution to solve my problem?
You need to trigger .change() (or .trigger('change')) on input value changes, otherwise programatically changes are not triggering events.
The id of your input is #customer not #customer_name.
$( "#tags" ).autocomplete({
source: aTags,
select: function(event, ui) {
$("#customer").val(ui.item.label).change();
}
});
$('#customer').on('change', function() {
$('#customer_copy').val($(this).val());
});
Working example.
Why not change the #customer_copy directly when item selected?
$( "#tags" ).autocomplete({
source: aTags,
select: function( event, ui ) {
console.log(ui.item.label);
$("#customer").val(ui.item.label);
$("#customer_copy").val(ui.item.label)
}
});
After a user has selected a value from an autocomplete list (Using jQuery autocomplete), I need to remove everything from the input box after the first space.
I got this far then got a bit lost. (currently just alerts on blur)
<script>
$(function() {
$( ".pn-autocomplete" ).autocomplete({
source: "pn-json.php",
minLength: 2,
}).blur(function () {
alert($(this).val());
});
});
</script>
Demo
Check this code snippet - It would skip all the text after the first space.
$(function () {
$( ".pn-autocomplete" ).autocomplete({
source: "pn-json.php",
minLength: 2,
}).blur(function () {
$(this).val(function () {
return this.value.split(' ')[0];
});
});
});
You can update the value to the first word like this,
<script>
$(function() {
$( ".pn-autocomplete" ).autocomplete({
source: "pn-json.php",
minLength: 2,
}).blur(function () {
var input_val = $(this).val(),
first_word = input_val.replace(/(\w+).*/,"$1");
$(this).val(first_word);
});
});
</script>
I have the following function which works properly:
$(function() {
var availableTags = <? echo htmlspecialchars($jsEnc,ENT_NOQUOTES,'utf-8');?>;
$( "input.tags" ).autocomplete({
source: availableTags
});
});
On all pre-existing:<input class="tags"/> the function does just as it should (an autocomplete list that is a database dump).
Now, these inputs actually exist in a <table>, with rows that can be added or removed on the fly.
When adding the cells to the table I do the following:
if(i== document.getElementById("soldTo").cellIndex){
element2.setAttribute('class','tags');
}
Which basically makes the input (element2) capable of being a target (at least so I thought) of the jquery function.
I am assuming that the jquery function is not "conscious" of this new element and must be re-initialized in some way to see the new members.
Is this true? Is this done at the time of adding the new element? Some sort of $(x).add(myBehavior)?
EDIT
I tried the following:
$("table.inventoryItems").bind("DOMSubtreeModified", function() {
alert('z');
$( "input.tags" ).autocomplete({
source: availableTags
});
});
and the alert also does not trigger.
Does anything seem suspicious?
Thank you
PROPER SOLUTION EXTERNAL LINK
jquery autocomplete on element retrieved w/ ajax
try DOMSubtreeModified event:
$("table").bind("DOMSubtreeModified", function() {
$( "input.tags" ).autocomplete({
source: availableTags
});
});
or you can use on() method based on how you create a new input element:
$("table").on("change", "input.tags", function() {
$(this).autocomplete({
source: availableTags
});
});
I'm using http://jqueryui.com/demos/tabs/#manipulation. I want to get an title of current selected tab which I earlier named (e.g. from a href). How to get it?
I tried:
$(ui.tab).attr('href')
Alternative way to get tab title:
var selected = $("#tabs").tabs( "option", "selected" );
var selectedTabTitle = $($("#tabs li")[selected]).text();
From the jquery docs,
var selectedTabTitle = null;
$( ".selector" ).tabs({
select: function(event, ui) {
selectedTabTitle = $(ui.tab).text();
alert(selectedTabTitle);
}
});
Use following in case of jQuery 1.9+,
var currentTabTitle = $('div[id="mytabs"] ul .ui-tabs-active > a').attr("href");
Just another version:
$("#tabsId .ui-state-active > a").html()
i guess jquery was modified because now i was able to fetch tab name using:
$(function () {
$( "#tabs" ).tabs({
activate : function (event,ui) {
selectedTabTitle = ui.newTab[0].innerText;
alert(selectedTabTitle);
}
});
});
Thanks I was struggling with this code.
Now I've used thiscode in my program. Working like this.
$('#tabs').click('tabsselect', function (event, ui) {
var selectedTab = $("#tabs").tabs('option','selected');
alert("selectedTab===>" + $($("#tabs li")[selectedTab]).text());
});
I am wondering how to grab the selected item's text value on jquery autocomplete.
I have initialised jquery as following :
$(document).ready(function (){
$("input#autocomplete").autocomplete({
source: postcodelist,
select: function (event, ui) {
AutoCompleteSelectHandler(event, ui)
}
});
});
And I have created a function function AutoCompleteSelectHandler(event, ui) { }.
Inside this function I want to some extra handling to feed data into correct textboxes but I can't figure out how to grab the text value of the selected item.
I did google a bit and tried examples but I can't seem to get it working.
Any help will be much appreciated.
Thanks a lot advance.
The ui parameter has an item property with the selected text
function AutoCompleteSelectHandler(event, ui)
{
var selectedObj = ui.item;
alert(selectedObj.value);
}
source: http://jqueryui.com/demos/autocomplete/#event-select go to tab "Events" and then event "Select"
// list of clients
$( "#client" ).autocomplete({
source: "lib/getClientList.php",
minLength: 2,
select: function(event, ui) {
alert(ui.item.value);
}
})
;
The ui.item.value is the reference that jquery utilizes to assign a value to the input
You don't need to apply an anonymous function as a wrap, you can directly pass the function ref.
$(document).ready(function (){
$("input#autocomplete").autocomplete({
source: postcodelist,
select: AutoCompleteSelectHandler
});
});
Within that method, you can either access this or event.target to get the current value, both values are referencing the input element:
function AutoCompleteSelectHandler(event, ui) {
alert( $(event.target).val() );
alert( $(this).val() );
// alert( this.value );
}
You just grab the value from the input in the same way you would if the user had typed it in themself:
$('input#autocomplete').val()