<script>
$(document).ready(function(){
$("#customer").autocomplete("barcode.php", {
selectFirst: true
});
});
</script>
<script>
$(document).ready(function() {
$("#customer").change(function (e) {
var item = $("#customer").val();
$.post("add", {"data[Sales][item]": item }, function (data) {
$('#details').html(data);
});});
});
</script>
<input type="text" id='customer' name="data[Sales][customer]" class="input-small focused" autocomplete='off'>
<div id='details'></div>
Autocomplete is working fine . On change is not working properly . If I enter all text without selecting through autocomplte then onchange script is working . If I selected trough autocompleted then I pressed tab key then onchange is not working . Its not showing any result.
Use .keypress instead of change
See documentation of keypress
var item = $("#customer").val(); ---> Change Here.. That's It.
If you are using the jQuery autocomplete plugin then use its onChange method
Ex.
$( ".selector" ).autocomplete({
selectFirst: true,
change: function( event, ui ) {
var item = $("#select01").val();
$.post("add", {"data[Sales][item]": item }, function (data) {
$('#details').html(data);
});
// Add more code here!
}
});
You can use as following:
$("#customer").autocomplete("barcode.php", {
selectFirst: true,
select: function(e, ui) {
alert("selected!");
},
change: function(e, ui) {
alert("changed!");
}
});
$.post("add", {"data[Sales][item]": item }, function (data) {
$('#details').html(data);
});
Related
When using keyup keydown to select option from autocomplete list textbox is showing value. But incase of selection from mouse it is working properly.
JsFiddle - http://jsfiddle.net/0c21r1pe/1
$("#promoteActionTextBox").autocomplete({
source: actionNames,
minLength: 0,
select: function (event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
$('#promoteActionError').hide();
$(this).attr('actionId', ui.item.value);
},
change: function (event, ui) {
if (!ui.item) {
$(this).val('');
}
else {
$('#promoteActionError').hide();
$(this).val(ui.item.label);
$(this).attr('actionId', ui.item.value);
}
}
}).focus(function (event, ui) {
event.preventDefault();
$('#promoteActionTextBox').autocomplete("search");
this.value = ui.item.label;
});
change the object property name from value to something else and it works
WORKING DEMO
UPDATE
How about THIS FIDDLE
I added a code which removes the event which is responsible for that effect.
create:function(){
$('.ui-autocomplete').unbind('menufocus');
}
select: function(event, ui) {
event.preventDefault(); // Add on keyboard keyup, keydown is working well
$("#id_value").val(ui.item.value);
$("#id_label").val(ui.item.label);
},
focus: function( event, ui ) {
event.preventDefault(); // Add on keyboard keyup, keydown is working well
$("#id_value").val(ui.item.value);
$("#id_label").val(ui.item.label);
}
I am trying to create an autocomplete with Jquery UI, i was having problem before of not knowing why it isnt working. And now i have filtered the problem down and got it to a single focused area.
Situation
1.) Auto complete works if the data is local.
2.) Auto complete does not work because the JSON data does not come in the exact same format.
3.) Not sure how to make the JSON data echo in the same format as the local data.
Javascript that works locally:
<script type="text/javascript">
$(function() {
$( "#zip" ).autocomplete({
source: [ {label:"705",value:"AIBONITO",state:"PR"},{label:"610",value:"ANASCO",state:"PR"},{label:"611",value:"ANGELES",state:"PR"},{label:"612",value:"ARECIBO",state:"PR"},{label:"601",value:"ADJUNTAS",state:"PR"}],
minLength: 1,
select: function( event, ui ) {
event.preventDefault();
$('#zip').val(ui.item.label);
this.value = ui.item.label;
$('#city').val(ui.item.value);
$('#state').val(ui.item.state);
}
});
});
</script>
Data needs to be in this format:
[ {label:"705",value:"AIBONITO",state:"PR"},{label:"610",value:"ANASCO",state:"PR"},{label:"611",value:"ANGELES",state:"PR"},{label:"612",value:"ARECIBO",state:"PR"},{label:"601",value:"ADJUNTAS",state:"PR"}]
Javascript remote:
<script type="text/javascript">
$(function() {
$( "#zip" ).autocomplete({
source: 'autozip.php',
minLength: 1,
select: function( event, ui ) {
event.preventDefault();
$('#zip').val(ui.item.label);
this.value = ui.item.label;
$('#city').val(ui.item.value);
$('#state').val(ui.item.state);
}
});
});
</script>
And the JSON will come in with double quotation like this, and it won't work:
[ {"label":"705","value":"AIBONITO","state":"PR"},{"label":"610","value":"ANASCO",state:"PR"},{"label":"7885","value":"WHARTON","state":"NJ"},{"label":"7981","value":"WHIPPANY","state":"NJ"},]
Trying to figure out how to remove the double quotation around the label, value and state.
THanks for your time!
<script type="text/javascript">
$(function() {
$( "#zip" ).autocomplete({
source: function (req, res) {
$.get('autozip.php?q=' + req.term).then(function (data) {
res(data);
});
},
minLength: 1,
select: function( event, ui ) {
event.preventDefault();
$('#zip').val(ui.item.label);
this.value = ui.item.label;
$('#city').val(ui.item.value);
$('#state').val(ui.item.state);
}
});
});
</script>
i'm using selectable jquery, i want to cater the value for selectable once the use select or unselect the item. My problem is, the last value of unselectable won't update.
Full code here http://jsfiddle.net/duQH6/ When I select Mon and Tue, then I unselect the Tue, the value is updated, but then when I click Mon, the value is not updated. Please advice.
Here my jquery code
$(function() {
$("#selectday1").bind('mousedown', function (e) {
e.metaKey = true;
}).selectable();
});
$('document').ready(function(){
$( "#selectday1" ).selectable({
selected: function(event, ui) {
var result=[];
jQuery(".ui-selected", this).each(function()
{
result.push(this.id);
$("#days").val(result.join(','))
});
}
});
$( "#selectday1" ).selectable({
unselected: function(event, ui) {
var result=[];
jQuery(".ui-selected", this).each(function()
{
result.push(this.id);
$("#days").val(result.join(','))
});
}
});
});
Thanks..
The problem is, you are updating the days value within the each loop, so when you unselect the last element the loop callback is never executed, that is why it is happening.
The days value is supposed to be updated once the each() loop is completed.
$(document).ready(function () {
$("#selectday1").selectable({
selected: function (event, ui) {
var result = [];
jQuery(".ui-selected", this).each(function () {
result.push(this.id);
});
$("#days").val(result.join(','))
},
unselected: function (event, ui) {
var result = [];
jQuery(".ui-selected", this).each(function () {
result.push(this.id);
});
$("#days").val(result.join(','))
}
});
});
Demo: Fiddle
But it can be simplified to
jQuery(function ($) {
function serialize(event, ui) {
var result = $(this).find(".ui-selected").map(function () {
return this.id;
}).get();
$("#days").val(result.join(','))
}
$("#selectday1").selectable({
selected: serialize,
unselected: serialize
});
});
Demo: Fiddle
I've populated a text box with list of values using autocomplete option available in jquery. I don't know how to trigger a function after user selected a value from auto complete. Please help me out. Here is my code.
$(function() {
var Product=$( "#tags" ).autocomplete({
source: availableProducts,
change: function(){alert();}
});
Product.autocomplete('option','change').call(Product);
});
It's not calling the alert().
You are missing the comma , Check your console for errors
var Product=$( "#tags" ).autocomplete({
source: availableProducts , <---
change: function(){alert();}
Try this:
$(function() {
$("#tags").autocomplete({
source: availableProducts,
select: function(event, ui) {
event.preventDefault();
alert(1);
}
});
Is there a way you can force jQueryUI autocomplete to display data label rather than data value:
For example
[{"label":"name","value":"1"},{"label":"name3","value":"6"},{"label":"name1","value":"8"},{"label":"name2","value":"10"}]
$( ".auto-search" ).autocomplete({
minLength: 2,
dataType: 'json',
source: tempJson,
focus: function(event, ui){
$('input[name="user-name"]').val(ui.item.label);
},
select: function (event,ui){
$('input[name="user-name"]').val(ui.item.label);
$('input[name="user-id"]').val(ui.item.value);
return false;
}
})
The above code, when you press the down button, displays the value rather than the label. Can it be changed to show the label?
Make sure to return false or prevent the default action of the event from your focus event handler:
focus: function(event, ui){
event.preventDefault();
$('input[name="user-name"]').val(ui.item.label);
},
The callback function is not working on me. so i used a bind event autocompletefocus and worked just fine.
$('input[name="user-name"]').on("autocompletefocus", function (event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
});