How to pass jQuery Ajax value to radio button group - javascript

I used jquery ajax code for get some values for running page.
<script>
$(function() {
$("#store_select").autocomplete({
source: "load_store_list.php",
minLength: 2,
select: function(event, ui) {
$('.outlettype').val(ui.item.outlettype);
}
});
});
</script>
I want to set that passed value to radio button group how to do it
eg: think ajax code passed "Car" as a value, I want to make checked for that value
<input type="radio" name="veh" value="Car"/>Car
<input type="radio" name="veh" value="Bus"/>Bus

Try .prop('checked', 'checked') with attribute selector [value=Car]
$('input[type=radio][value=Car]').prop('checked', 'checked');
Edit
$(function () {
$("#store_select").autocomplete({
source: "load_store_list.php",
minLength: 2,
select: function (event, ui) {
$('.outlettype').val(ui.item.outlettype);
$('input[type=radio][value=' + ui.item.outlettype + ']').prop('checked', 'checked');
}
});
});

Related

jQuery autocomplete: How to obtain HTML item's "id" attribute?

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');
}

Set jQuery Autocomplete on Textbox KeyDown Event

I want jQuery Autocomplete on textbox key down event
I have tried below code, but it is not working.
$("#txtName").keyDown({
$("#txtName").autocomplete({
source: '#Url.Action("GetAllName", "Home")',
select: function (event, ui) {
$("#txtName").val(ui.item.value);
return false;
}
});
});
You do not need the keyDown event otherwise you are rebinding the autocomplete on every keydown.
$("#txtName").autocomplete({
source: '#Url.Action("GetAllName", "Home")',
select: function (event, ui) {
$("#txtName").val(ui.item.value);
return false;
}
});
To show all results when one character is entered add minLength: 1
If what you want is to have all the items displayed when the textbox has focus then this is what you are looking for: https://stackoverflow.com/a/4604300/1398425
If you just want it to begin searching on the first keystroke, try using minLength: 1:
$("#txtName").autocomplete({
source: '#Url.Action("GetAllName", "Home")',
minLength: 1,
select: function (event, ui) {
$("#txtName").val(ui.item.value);
return false;
}
});

jQuery UI Autocomplete displaying wrong value

jsFiddle for the interactive example
I have an auto-complete box similar to the example. If you start typing a name, that begins with M it will give you a drop-down list. If arrow down through the names (rather than selecting one with your mouse), you will notice, that the input box gets filled with the value rather than the name of the person.
HTML:
<input type="text" id="myInput" placeholder="Type M...">
<input type="hidden" id="myHidden">
Script:
$("#myInput").autocomplete({
delay: 500,
minLength: 1,
select: function(e, ui) {
$(this).val(ui.item.label);
$("#myHidden").val(ui.item.value);
return false;
},
source: [{"label":"Marie","value":1},
{"label":"Michelle","value":2},
{"label":"Mia","value":3},
{"label":"Melissa","value":4},
// ...etc
];
});
When you select a name, it adds it to the input correctly, but I'm trying to get rid of the numerical values being displayed as you arrow through the choices.
I didn't see any event in the auto-complete docs to hook into accomplish this.
May I have missed it or perhaps there is a way of restructuring my source data to prevent this?
Solution:
$("#myInput").autocomplete({
delay: 500,
minLength: 1,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
$("#myHidden").val(ui.item.value);
return false;
},
focus: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
},
source: [{"label":"Marie","value":1},
{"label":"Michelle","value":2},
//...
{"label":"Maureen","value":40}]
});
JSFiddle demo

jquery autocomplete suggestion trigger search button

okay iM using jquery autocomplete and Everything works fine but I want it to trigger the search button when a suggestion is selected. the code i have is this.
$( "#tags" ).autocomplete({
source: availableTags
select: function (event, item)
{
if (event.keyCode == 13){
$('#IDofMYform').submit()
}
}
});
});
You should set the value to the form input before submitting. If you don't, your form is submitted before it has a chance to populate the input.
Something like :
$("#tags").autocomplete({
source: availableTags
select: function (event, ui) {
//Set the value
$(this).val(ui.item.value);
// Submit the form
$('#IDofMYform').submit();
}
});

jquery autocomplete get selected item 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()

Categories

Resources