Set jQuery Autocomplete on Textbox KeyDown Event - javascript

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

Related

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

How to pass jQuery Ajax value to radio button group

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

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()

Can an input (type=text) be a jQuery droppable?

I am trying out jQuery-UI drag-drop feature.
I was able to easily convert a div into a droppable but making a text box a Droppable doesn't work.
jQuery('input[type=text]:visible').droppable({
drop: function (e, ui){
console.log('dropping',ui); //--> this never gets called
jQuery(this).val(jQuery(ui.helper).text());
}
});
Is it the case that the default browser behavior prevents text fields and text areas from being droppables?
EDIT:
It doesn't work only when the input field is a part of a draggable..
http://jsfiddle.net/guNTP/4/
<span>hello world!<input></span>
$("input").droppable({
drop: function(event, ui) {
alert(ui.draggable.text());
}
});
$("span").draggable({helper:function(){
return jQuery("<span>hello</span>");
}});
Yes, it can be: http://jsfiddle.net/guNTP/
$("#myinput").droppable({
drop: function(event, ui) {
$(this).val( $(this).val() + ui.draggable.text());
}
});
$("span").draggable({revert:true});

Categories

Resources