jquery autocomplete suggestion trigger search button - javascript

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

Related

How to use 'on change' event on an input type hidden?

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

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

parsing input field contents on blur using jquery and autocomplete

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>

dom jquery behavior not functioning

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

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