How to map a complex nested json to jquery autocomplete format? - javascript

How to map a complex nested json to jquery autocomplete format? I tried to map my custom json to the required jquery autocomplete format label, value, ... but my list is 'undefined'. This is my setup:
JSON:
{"data":[{"DT_RowId":"row_A6J851","accounts":{"code":"A6J851","name":"Peter Jackson"}},{"DT_RowId":"row_1D01Q14","accounts":{"code":"1D01Q14","name":"Earl Bundy"}}]}
Javascript:
$('#input-search').autocomplete({
source: function ( request, response ) {
$.ajax({
type: 'GET',
url: '/source.php',
dataType: "json",
success: function( data ) {
response( $.map( data.data.accounts, function( value, key ) {
return {
label: value.name,
value: value.name,
id: value.code
}
}));
}
});
},
create: function() {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
return $( "<li></li>" )
.append( "<a>" + item.label + "</a>" )
.appendTo( ul );
};
}
});

It looks like from your data example that you are not iterating over the nested accounts array, but rather the data array. Try something like this:
$('#input-search').autocomplete({
source: function ( request, response ) {
$.ajax({
type: 'GET',
url: '/source.php',
dataType: "json",
success: function( data ) {
var results = [];
$.each(data.data, function(d){
var mapped = $.map(d.accounts, function( value, key ) {
return {
label: value.name,
value: value.name,
id: value.code
};
})
results = results.concat(mapped);
});
response(results);
}
});
},
create: function() {
$(this).data('ui-autocomplete')._renderItem = function (ul, item) {
return $( "<li>" )
.append( "<span>" + item.label + "</span>" )
.appendTo( ul );
};
}
});

Related

ui-autocomplete showing all results instead of filtered results

I'm just trying something out, as an experiment, with the jQuery autocomplete widget.
I used this as an example: Autocomplete | APi Data
But when i try it, it's not filtering the results. it only shows all results when i type something and then 'backspace-it-all'
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#name" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "https://nyros-ecommerce.myshopify.com/products.json",
dataType: "json",
dataFilter: function (data) { return data; },
success: function( data ) {
console.log(data)
response( $.map( data.products, function( result ) {
return {
value: result.handle,
imgsrc: result.images[0].src
}
}));
}
});
},
minLength: 1,
select : function(event, ui) {
event.preventDefault();
window.location.href = "/products/"+ui.item.value;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
console.log(item.value)
return $( "<li></li>" )
.data( "item.ui-autocomplete", item.value )
.append( "<a>" + "<img style='width:50px;height:55px' src='" + item.imgsrc + "' /> " + item.label+ "</a>" )
.appendTo( ul );
};
});
</script>
<div class="ui">
<label for="name">producst search: </label>
<input id="name">
</div>
The only issue with your code is, you are fetching data in function but not filtering the data.
You just need to filter your data using the following line. Here final_data is nothing but your resulted output.
response($.ui.autocomplete.filter(final_data, request.term));
Try below code.
$(function() {
$( "#name" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "https://nyros-ecommerce.myshopify.com/products.json",
dataType: "json",
dataFilter: function (data) { return data; },
success: function( data ) {
var final_data =( $.map( data.products, function( result ) {
return {
value: result.handle,
imgsrc: result.images[0].src
}
}));
response($.ui.autocomplete.filter(final_data, request.term));
}
});
},
minLength: 1,
select : function(event, ui) {
event.preventDefault();
window.location.href = "/products/"+ui.item.value;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.ui-autocomplete", item.value )
.append( "<a>" + "<img style='width:50px;height:55px' src='" + item.imgsrc + "' /> " + item.label+ "</a>" )
.appendTo( ul );
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="ui">
<label for="name">producst search: </label>
<input id="name">
</div>

Jquery UI auto complete (with custom listing) not working

I am trying to use jquery UI autocomplete, but somehow the same won't show up despite having no javascript error.
here is my json data:
{"d":"[{\"label\":\"XYZ\",\"desc\":\"desc 1\",\"value\":\"XYZ\",\"ID\":595,\"icon\":\"UM-892983\"},{\"label\":\"ABC .\",\"desc\":\"desc 2\",\"value\":\"ABC .\",\"ID\":1681,\"icon\":\"UM-432944\"}]"}
Here is my JS Function for processing the autocomplete:
$().ready(function(){
$("#txtName").bind("keyup", function (e) {
// Ajax call returns the above json data
// On Ajax Success I call
onSucName(returnData.d);
});
});
function onSucName(result) {
var varArrAdms = $.parseJSON(result);
$("#txtName").autocomplete({
source : varArrAdms,
select : function (event, ui) {
setNameValue(ui.item.icon)
$("#txtNo").val(ui.item.icon)
$("#btnSearch").click();
},
open : function () {
$(this).addClass('loadingTxtBox');
},
close : function () {
$(this).removeClass('loadingTxtBox');
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.value + " <b> desc:" + item.desc + "</b> <i> No:" + item.icon + "</i></a>").appendTo(ul);
};
}
Where am I wrong?
Try this example
$('#txtName').autocomplete({
source: function (request, response) {
$.ajax({
url: 'url',
data: {}, //pass data here
dataType: 'json',
type: 'post',
success: function (data) {
response($.map(data, function (item) {
return {
label: item.icon
}
}));
}
})
},
select: function (event, ui) {
var itemval = ui.item.label;
// here you can access selected result `itemval`
return false;
},
minLength: 1
});
Why are you binding the autocomplete on keyup.... Rather you should bind it once.
Also, before rebinding it you shoud destroy the existing instance.

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

Why jQuery autocomplete select not work?

When I input 5 in the customer_code input area. It list the values.The problem is that when I select an entry, the 'id' value should show in the customer_name area.But it didn't!
[{"id":"5","code":"code005","name":"\u9867\u5ba2\u540d005"},{"id":"15","code":"code015","name":"\u9867\u5ba2\u540d015"},]
the json return by php is like above.and
$(function() {
$( "#customer_code" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "/management/order/auto",
dataType: "json",
data: {code: request.term},
success: function(data) {
var suggestions = [];
$.each(data, function(i, val) {
suggestions.push({
label: val.code,
// label: val.name,
});
});
response( suggestions );
},
});
},
select: function(e, ui) {
alert(ui.item.name);
// $('#customer_name').val(ui.item.name);
// $('#customer_name').val(ui.item.value.name);
// return false;
},
});
});
my html page is like this
<?php echo Form::input('customer_name', Arr::get($basic, 'customer_name'), array('id' => 'customer_name')); ?>
<?php echo Form::input('customer_code', Arr::get($basic, 'customer_code'), array('id' => 'customer_code')); ?>
The select callback is currently part of the settings for the $.ajax() request, which won't use it:
// ...
$.ajax({
url: "/management/order/auto",
// ...
success: function (data) {
// ...
},
select: function (e, ui) {
// ...
}
});
// ...
It should instead be part of the options for .autocomplete(), outside of the function for source.
$( "#customer_code" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "/management/order/auto",
// ...
success: function () {
// ...
}
});
},
select: function (e, ui) {
// ...
}
})

Jquery autocomplete with label and links

I have jquery autocomplete working perfect for label and it's value.
$( "#search_name" ).autocomplete({
source: function(request, response) {
$.ajax({
url: "/ajax/fetch_search_suggestion",
dataType: "json",
type: "POST",
data: {
keyword: request.term
},
success: function(data) {
response( $.map( data, function( item ) {
return {
label: item.label
}
}));
}
})
}
});
PHP
while($search = $result->fetch()){
$link = '';
$link .= $search['cus_firstname'].' '.$search['cus_lastname'];
array_push($searchArray, array('label'=> $link, 'value' => $keyword));
}
array_push($searchArray, array('label'=>"Not Here? Click to add new", 'value' =>"http://www.google.com"));
If customer is not there, on click add new it should go to the google.com. How can I achieve this? Thanks.
I tried with adding:
select : function(event, ui) {
response( $.map( data, function( item ) {
return {
window.location = (ui.item.value);
return false;
}
}));
}
But, I am getting error.

Categories