jQuery UI Autocomplete: How to base on JSON data NOT name & Label - javascript

I've got an AJAX url that returns data in the following format:
[{ "product": "Zip a dee doo dah", "desc": "F oq nfp gd r exbiikr wblkjm yumdd xy voqgt d hjtk. As sr ywvgiyb iqoibgm akron slfudtq smabx gj awlbtp ji vb do prvhlqq. ", "type": "Doodahs", "price": "3.99"}]
I'm trying to get the auto-complete to be based on the "product" entry.
Here is my code. It sends the request like it should, but I can't seem to get the auto-complete to populate the value based on 'product'. I'm sure I'm overlooking something stupid, but I've been staring at this for a few hours and figured its time to see if someone can help ;-).
Thanks for your help!
$(document).ready(function() {
$( "input[type='text']" ).autocomplete({
source: function( request, response ) {
$.ajax({
dataType: "json",
type : 'POST',
data: 'q=' + prepareInput(this.element.attr('name') + '=' + request.term),
success: function(data) {
$('input.suggest-user').removeClass('ui-autocomplete-loading');
return $.map( data, function(item) {
var r = $.parseJSON(data);
return {
label: r['product'],
value: r['product']
};
});
},
error: function(data) {
$('input.suggest-user').removeClass('ui-autocomplete-loading');
}
});
},
minLength: 3
});
});
--------------- Still not working, but current code below ------------------------
$(document).ready(function() {
$( "input[type='text']" ).autocomplete({
source: function( request, response ) {
$.ajax({
dataType: "json",
type : 'POST',
data: 'q=' + prepareInput(this.element.attr('name') + '=' + request.term),
success: function(data) {
$('input.suggest-user').removeClass('ui-autocomplete-loading'); // hide loading image
return $.map( data, function(item) {
console.log(item['product']);
return {
label: item['product'],
value: item['product']
};
});
},
error: function(data) {
$('input.suggest-user').removeClass('ui-autocomplete-loading');
}
});
},
minLength: 3
});
Console.log is currently writing out the proper value, but the auto-complete still isn't popping up.
--- Working Code Below - Finally Got it Running. Thanks #Robert --------------
I was missing a number of things:
1) It needs to be an array, so I added [].
2) Apparently the format needs to be assigned to "response".
Now its working...
$(document).ready(function() {
$( "input[type='text']" ).autocomplete({
source: function( request, response ) {
$.ajax({
dataType: "json",
type : 'POST',
data: 'q=' + prepareInput(this.element.attr('name') + '=' + request.term),
success: function(data) {
$('input.suggest-user').removeClass('ui-autocomplete-loading'); // hide loading image
return $.map( data, function(item) {
response([{
label: item['product'],
value: item['product']
}]);
});
},
error: function(data) {
$('input.suggest-user').removeClass('ui-autocomplete-loading');
}
});
},
minLength: 3
});

So you have an error on this line:
var r = $.parseJSON(data);
Post the output of console.log(data); //add this line bellow your success call
And change this line var r = $.parseJSON(data); to var r = $.parseJSON(item);

You are missing a single quote at end
prepareInput(this.element.attr('name'))

Related

Display the name but submit the ID with jQuery tag-it

Thanks for your time reading and helping!
I'm using the jQuery "tag-it" plugin: https://github.com/aehlke/tag-it
I've already checked the current questions and answers on the site, but they didn't help to achieve the 100% of what I need. I need help with the last step.
What I'm trying to do is, when the user is writing an email address, the system suggests what users belong to that address.
The suggestions are generated in a PHP page and I take them using AJAX from the plugin. The format given is this:
[
{"value": "13", "label": "Mauricio"},
{"value": "4", "label": "Manolo"}
]
"value" is the ID of the user and "label", the name of the person.
In the example, "Manalo" and "Mauricio" are displayed as suggestions to select. But when they are selected, what is displayed is the ID of the user (the "value"), not the name (the "label").
What I want to do is to display the name of the selected users but when I send the form, only the IDs are sent.
This is the current code. Thanks a lot for the help again.
$(".users").tagit({
autocomplete: {
source: function(request, response) {
$.ajax({
type: "GET",
url: 'test_json.php?text=' + request.term,
dataType: "json",
success: function(data) {
response( $.map( data, function( item ) {
return {
label: item.label,
value: item.value
}
}));
}
});
},
},
});
Get the selected option value from the jquery Autocomplete
$(".users").tagit({
autocomplete: {
source: function(request, response) {
$.ajax({
type: "GET",
url: 'test_json.php?text=' + request.term,
dataType: "json",
success: function(data) {
response( $.map( data, function( item ) {
return {
label: item.label,
value: item.value
}
}));
},
select: function(event, ui) {
//For better understanding kindly alert the below commented code
var selectedObj = ui.item;
alert(selectedObj.value);
}
});
},
},
});

How to get the unique value in autocomplete in php from mysqldatabase

How to get the unique value in autocomplete in php from mysqldatabase. and how do i get all values just like i have 3 values in autocomplete which same so i want only one in autocomplete but want to fetch the data of all. how do i do this ?
just like in picture i want 1 one php only but want the data from all the three values.
i am trying some thing like this
var citycode;
$('#countryname_1').autocomplete({
source: function( request, response ) {
$.ajax({
url : 'ajax.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'country_table',
row_num : 1
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
var len=code.length;
var co= code[0];
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|").length;
var dat = ui.item.data.split("|");
citycode=dat[0] ;
alert(citycode);
}
});

CKeditor populate dialog select with Ajax

I am trying to populate my CKeditor dialog selectbox with ajax. The following is from my plugin.js file:
...
{
type : 'select',
id : 'style',
label : 'Style',
setup : CKEDITOR.ajax.post( '.../ckeditor/plugins/simpleLink/ajax.php', JSON.stringify( { foo: 'bar' } ), 'application/json', function( data ) {
console.log( data);
}),
items : [ ['--- Select something ---', 0] ],
commit : function( data )
{
data.style = this.getValue();
}
}
...
The ajax output looks like this:
["Basketball","basketball"],["Baseball","baseball"],["Hockey","hockey"]
I am really wondering how to get the output INTO the "items". From my point of view I tried everything.
Can someone help me?
CKEditor select widgets have an 'add' function you can call to populate them. You can call it from an 'onLoad' function, if you add one:
{
type: 'select',
id: 'myselect',
label: 'The select will be empty until it is populated',
items: [ ],
onLoad: function(api) {
widget = this;
$.ajax({
type: 'GET',
url: 'path/to/your/json',
dataType: 'json',
success: function(data, textStatus, jqXHR) {
for (var i = 0; i < data.length; i++) {
widget.add(data[i]['label'], data[i]['value']);
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('ajax error ' + textStatus + ' ' + errorThrown);
},
});
},
},
Found a workaround. For anyone having the same problem - here is my way of solving it:
plugin.js:
This code before "CKEDITOR.plugins.add( 'PLUGINNAME', {..."
jQuery.extend({
getValues: function(url) {
var result = null;
$.ajax({
url: url,
type: 'get',
dataType: 'json',
async: false,
success: function(data) {
result = data;
}
});
return result;
}
});
var results = $.getValues('.../ckeditor/plugins/PLUGINNAME/ajax.php');
This is the code for the select box
{
type : 'select',
id : 'style',
label : 'Style',
setup : '',
items : results,
commit : function( data )
{
data.style = this.getValue();
}
}

How to push the fetched autocomplete data from JSON API to a text box?

I am trying to fetch the values as Autocomplete jQuery method and store the selected input values into a text box (push to text box). Sounds easy but this JSON schema is kinda taking buzzy time.
Can I get a quick help here?
http://jsfiddle.net/ebPCq/1/
jQuery Code:
$("#material_number").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "json",
data: {
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function (data) {
response($.map(data.geonames, function (item) {
return {
// following property gets displayed in drop down
label: item.name + ", " + item.countryName,
// following property gets entered in the textbox
value: item.name,
// following property is added for our own use
my_description: item.fcodeName
}
}));
}
});
After fixing up and finalizing the initial functionality, I came upon conclusion with this fiddle as the solution to my query posted above.
http://jsfiddle.net/ebPCq/7/
JS Code:
$(function () {
$("#input").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "json",
data: {
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function (data) {
response($.map(data.geonames, function (item) {
return {
// following property gets displayed in drop down
label: item.name + ", " + item.countryName,
// following property gets entered in the textbox
value: item.name,
// following property is added for our own use
my_description: item.fcodeName
}
}));
}
});
},
minLength: 2,
select: function (event, ui) {
if (ui.item) {
$("#push-input").prepend(ui.item.value + '\r\n');
}
}
});
});

Uncaught TypeError: Object has no method autocomplete and its blocking to populate dialogue box to delete

I'm sorry similar post is already there in the community, But i'm finding it strange. Its working fine but it affected my other views and not allowing other view pages to populate any dialogue boxes..
I tried to fix it by wrapping it in function() like this
$('#_auto').autocomplete(function(){
But, with this i'm not getting jason values in the _auto textfield and getting unexpected token error with following line.
can anyone help me to solve this please.
source: function(request,response){
this is my code:
$(function () {
$('#_auto').autocomplete({
selectFist: true,
minLength: 2,
source: function (request, response) {
var sval = $('#_auto').val();
//alert(sval);
$.ajax({
url: BASE_URL + '/controller/search/',
type: 'POST',
data: {
'term': sval,
},
dataType: 'json',
success: function (data) {
console.log(data);
var dta = [];
orgdetails = [];
//response(data.d);
for (var i in data) {
dta.push(data[i].name);
orgdetails[data[i].name] = data[i].id;
}
response(dta); //response(dta);
},
error: function (result) {}
}); //ajax
}
}).focus(function () {
$(this).trigger('keydown.autocomplete');
});
});
Many Thanks
I think the for loop should be
var dta = $.map(data, function(v, i){
orgdetails[v.name] = v.id;
return {
label: v.name,
id: v.name
};
});
Fiddle.
Another observation, You can get the current searched term using request.term rather than $('#_auto').val()
Complete code:
$('#_auto').autocomplete({
selectFist: true,
minLength: 2,
source: function (request, response) {
$.ajax({
url: BASE_URL + '/controller/search/',
type: 'POST',
data: {
'term': request.term,
},
dataType: 'json',
success: function (data) {
console.log(data);
orgdetails = {};
var dta = $.map(data, function(v, i){
orgdetails[v.name] = v.id;
return {
label: v.name,
id: v.name
};
});
response(dta); //response(dta);
},
error: function (result) {}
}); //ajax
}
}).focus(function () {
$(this).trigger('keydown.autocomplete');
});

Categories