im using autocomplete to retrieve data from the database
$('input[name=\'product_name\']').autocomplete({
'source': function(request, response) {
$.ajax({
url: 'index.php?route=checkout/cart/autocomplete&name=' + encodeURIComponent(request), //Controller route
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
label: item['name'],
value: item['product_id']
}
}));
}
});
},
'select': function(item) {
$('input[name=\'product_id\']').val(item['value']);
$('input[name=\'product_name\']').val(item['label']);
},
focus: function(event, ui) {
return false;
}
});
i already put the focus return false but my dropdown arrow keys still not working.
i also tried using event.preventDefault();
There is some problem with your select event handler of jquery-ui-autocomplete. So try this script -
$('input[name=\'product_name\']').autocomplete({
source: function(request, response) {
$.ajax({
url: 'index.php?route=checkout/cart/autocomplete&name=' + encodeURIComponent(request), //Controller route
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
label: item['name'],
value: item['product_id']
}
}));
}
});
},
select: function(event , ui) {
$('input[name=\'product_id\']').val(ui.item.value);
$('input[name=\'product_name\']').val(ui.item.lable);
},
focus: function(event, ui) {
return false;
}
});
jquery-ui-autocomplete event select callback specified:
$( ".selector" ).autocomplete({ select: function( event, ui ) {} });
And hope this will solve your issue.
Related
I have below autocomplete code, which works fine When i type one or more letters.
$("body").on('focus', 'input.sub-category', function () {
var id = $(this).data('thiscatid');
var term = $(this).val();
$(this).autocomplete({
minLength: 0,
source: function( request, response ) {
$.post( base_url + 'ajax/getSubCats',
{ parent_id: id, term: term},
function( data ) {
response(data);
},
'json'
);
},
select:function(event,ui){
$(".sub-cat").val(ui.item.label);
return false;
},
change: function(event, ui) {
console.log(this.value);
if (ui.item == null) {
this.setCustomValidity("You must select a category");
}
}
});
});
I would like to populate the drop down with all of the matching words from the database on just focusing the input box. That means even without typing a single word. When i just focus, the function is called, but nothing within the
function $(this).autocomplete({ is executed. Any idea why autocomplete not working when focus in on the input field?
Use below code it will work as per your requirement.
$("body input.sub-category").each(function{
$(this).on('focus', 'input.sub-category', function () {
var id = $(this).data('thiscatid');
var term = $(this).val();
$(this).autocomplete({
minLength: 0,
source: function( request, response ) {
$.post( base_url + 'ajax/getSubCats',
{ parent_id: id, term: term},
function( data ) {
response(data);
},
'json'
);
},
select:function(event,ui){
$(".sub-cat").val(ui.item.label);
return false;
},
change: function(event, ui) {
console.log(this.value);
if (ui.item == null) {
this.setCustomValidity("You must select a category");
}
}
});
});
});
If this is not work add status in comment.
I was able to fix by adding one more function. So there is one function executing on keyup and another one on focus.
$("body").on('keyup', 'input.sub-category', function () {
var id = $(this).data('thiscatid');
var term = $(this).val()?$(this).val():"";
$(this).autocomplete({
minLength: 0,
autoFocus: true,
source: function( request, response ) {
$.post( base_url + 'ajax/getSubCats',
{ parent_id: id, term: term},
function( data ) {
response(data);
},
'json'
);
},
select:function(event,ui){
$(this).val(ui.item.label);
return false;
},
change: function(event, ui) {
if (ui.item == null) {
this.setCustomValidity("You must select a category");
}
}
});
});
Above one executes on keyup and below one on focus.
$("body").on('focus', 'input.sub-category', function () {
var id = $(this).data('thiscatid');
var term = $(this).val()?$(this).val():"";
$(this).autocomplete({
minLength: 0,
autoFocus: true,
source: function( request, response ) {
$.post( base_url + 'ajax/getSubCats',
{ parent_id: id, term: term},
function( data ) {
response(data);
},
'json'
);
},
select:function(event,ui){
$(this).val(ui.item.label);
return false;
},
change: function(event, ui) {
if (ui.item == null) {
this.setCustomValidity("You must select a category");
}
}
});
$(this).autocomplete("search", "");
});
I have autocomplete on one textbox. it's working in IE9, firefox, chrome. but not working in IE8.
error msg is :SCRIPT5007: Unable to get value of the property 'question': object is null or undefined.
please read the following code and comments inside. Thanks.
$(function () {
$newdiv.find("input[id$=tbxQuestion]").autocomplete({
source: function (request, response) {
$.ajax({
url: "Services/Questions.ashx",
dataType: "jsonp",
async: false,
data: {
featureClass: "P",
style: "full",
type: "tf",
maxRows: 10,
name_startsWith: request.term
},
success: function (data) {
response($.map(data.questions, function (q) {
//q has values right before here
return {//q is undefined here. try to find the reason.
value:q.question,
answer:q.answer,
opta: q.opta,
optb: q.optb,
optc: q.optc,
optd: q.optd
}
}))
}
})
},
minLength: 4,
delay: 800,
focus: function (event, ui) {
return false;
},
select: function (event, ui) {
$(this).val(ui.item.value);
return false;
}
});
});
Hey could someone guide me out of this problem....
I successfully created the jquery autocomplete function , but my problem is that autocomplete suggestions shows all the available labels . Autocomplete is showing the results which are not even matching the search term . I mean it showing all available label . Is their any solution to show only matching labels. here is the java function.
Any help will be gladly appreciated . Thank You
$(document).ready(function () {
$("#search-title").autocomplete({
source: function ( request, response ) {
$.ajax({
url: "availabletags.json",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response( $.map( data.stuff, function ( item ) {
return {
label: item.label,
value: item.value
};
}));
}
});
},
minLength: 2,
select: function (event, ui) {
$(event.target).val(ui.item.label);
window.location = ui.item.value;
return false;
}
});
});
EDIT : - Here is the Json File
{"stuff":[ {"label" : "Dragon", "value" : "eg.com"} ,
{"label" : "testing", "value" : "eg2.com"}]}
Successful Edited Code
<script>
$(document).ready(function () {
$("#search-title").autocomplete({
source: function ( request, response ) {
$.ajax({
url: "availabletags.json",
dataType: "json",
success: function (data) {
var sData = data.stuff.filter(function(v) {
var re = new RegExp( request.term, "i" );
return re.test( v.label );
});
response( $.map( sData, function ( item ) {
return {
label: item.label,
value: item.value
};
}));
}
});
},
minLength: 2,
focus: function (event, ui) {
this.value = ui.item.label;
event.preventDefault(); // Prevent the default focus behavior.
},
select: function (event, ui) {
$(event.target).val(ui.item.label);
window.location = ui.item.value;
return false;
}
});
});
</script>
Here is the change you want to make:
dataType: "json",
success: function (data) {
var sData = data.stuff.filter(function(v) {
return v.value.indexOf( request.term ) > -1;
});
response( $.map( sData, function ( item ) {
This search will be done by value. To search by label, in other words for the user's input to be compared to the label in your JSON use the following instead:
return v.label.indexOf( ........
UPDATE
To make your search case insensitive, use the following:
var re = new RegExp( request.term, "i" );
return re.test( v.label );
instead of return v.value.indexOf( request.term ) > -1;
I am trying to use autocomplete and autogrow with the Jeditable jquery plugin and cannot seem to incorporate both. I currently have the Jeditable + autocomplete working perfectly. When I tr to add code for the autogrow it doesn't work and causes a post back when I hit the save button. Any help would be appreciated.
This is what I have so far:
$('#directionList').autocomplete({
source: function (request, response) {
$.ajax({
url: '../api/standarddirections/?q=' + request.term,
dataFilter: function (data) { return data; },
success: response
});
},
minLength: 2
});
$.editable.addInputType('autocomplete', {
element: $.editable.types.textarea.element,
plugin: function (settings, original) {
$('textarea', this).autocomplete(settings.autocomplete);
}
});
$(".directionAutoComplete").editable(function (value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return (value);
}, {
type: "autocomplete",
indicator: 'Saving...',
tooltip: "Enter a direction...",
onblur: function (value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return (value);
},
cancel: 'Cancel',
submit: 'Save',
autocomplete: {
source: function (request, response) {
$.ajax({
url: '../api/standarddirections/?q=' + request.term,
dataFilter: function (data) { return data; },
success: response
});
},
minLength: 2
}
});
Here's some reference material:
Jeditable
Jeditable - Auto Grow Tutorial
For those running into this problem I have gotten it to work. I went with the growfield plugin just because the autogrow one was having some weird results (it worked, but the formatting looked off when I saved it so I just opted to go the easier route of using a different plugin.)
Here's my final code:
$.editable.addInputType('growfield', {
element: function (settings, original) {
var textarea = $('<textarea>');
if (settings.rows) {
textarea.attr('rows', settings.rows);
} else {
textarea.height(settings.height);
}
if (settings.cols) {
textarea.attr('cols', settings.cols);
} else {
textarea.width(settings.width);
}
// will execute when textarea is rendered
textarea.ready(function () {
// implement your scroll pane code here
});
$(this).append(textarea);
return (textarea);
},
plugin: function (settings, original) {
// applies the growfield effect to the in-place edit field
$('textarea', this).growfield(settings.growfield);
$('textarea', this).autocomplete(settings.autocomplete);
}
});
$(".directionAutoComplete").editable(function (value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return (value);
}, {
type: "growfield",
indicator: 'Saving...',
tooltip: "Enter a direction...",
onblur: function (value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return (value);
},
cancel: 'Cancel',
submit: 'Save',
growfield: {},
autocomplete: {
source: function (request, response) {
$.ajax({
url: '../api/standarddirections/?q=' + request.term,
dataFilter: function (data) { return data; },
success: response
});
},
minLength: 2
}
});
I am using a variable from a function to create a autocomplete functionality, here is the code:
function autocomplete(mp_info){
var request_data = {
'_action': 'GET'
};
$(mp_info).find("#id_mp_element").autocomplete({
source: function( request, response, elems ) {
alert("working");
$.ajax({
url: "/api/slots/"+request.term+"/12/",
dataType: "json",
type: 'POST',
data: request_data,
success: function( data ) {
response($.map(data, function(item) {
return {
label: item.name,
id: item.id,
pos: item.position
}
}));
}
});
},
minLength: 2,
select: function( event, ui ) {
var info_row = $(".info_row").has(this);
$($('td',info_row.parent().prev())[2]).text($(".info_row #id_mp_element").val()+" / "+ui.item.pos);
$("#id_mp_s").val(ui.item.id);
$("#id_mp_position_metric").val(ui.item.pos);
},
});
}
The alert message it is not shown in IE, when we write something in the text input
remove coma at the end:
select: function( event, ui ) {
var info_row = $(".info_row").has(this);
$($('td',info_row.parent().prev())[2]).text($(".info_row #id_mp_element").val()+" / "+ui.item.pos);
$("#id_mp_s").val(ui.item.id);
$("#id_mp_position_metric").val(ui.item.pos);
} <------- there shouldn't be a come here
});