Good Afternoon Guys I coding a whole day to solve this but it seems my code doesn't work. How can I achieved this I hope you help me :(
I was wondering if can convert the selected json data into another value.
I will give you an example:
1st problem is: If i select Manila it will display to another textbox the DestinationID instead of string.
2nd problem is: When you select a destination i want to display the value "Manila" you can view the image below...
This is my current output from the left textbox the problem with this is the two value from the json data Name and caption are merge in one textbox. Click to view
So This is i want to achieved.. Click to view
This is the look when you begin to select. If i select one of these i want to display one Value only example: Manila

By the way this is my code.
var data = {
"suggestions": [{
"group": "CITY_GROUP",
"entities": [{
"geoId": "2375",
"destinationId": "1004070",
"landmarkCityDestinationId": null,
"type": "CITY",
"redirectPage": "DEFAULT_PAGE",
"latitude": 14.595628,
"longitude": 120.974836,
"caption": "Manila, National Capital Region, <span class='highlighted'>Philippines</span>",
"name": "Manila"
},
{
"geoId": "55429",
"destinationId": "986398",
"landmarkCityDestinationId": null,
"type": "CITY",
"redirectPage": "DEFAULT_PAGE",
"latitude": 14.10484,
"longitude": 120.937943,
"caption": "Tagaytay, Calabarzon, <span class='highlighted'>Philippines</span>",
"name": "Tagaytay"
},
{
"geoId": "9737",
"destinationId": "999341",
"landmarkCityDestinationId": null,
"type": "CITY",
"redirectPage": "DEFAULT_PAGE",
"latitude": 14.533413702481994,
"longitude": 121.0007313266143,
"caption": "Pasay, National Capital Region, <span class='highlighted'>Philippines</span>",
"name": "Pasay"
},
{
"geoId": "601371",
"destinationId": "1639027",
"landmarkCityDestinationId": null,
"type": "CITY",
"redirectPage": "DEFAULT_PAGE",
"latitude": 11.959059,
"longitude": 121.92627,
"caption": "Boracay Island, Western Visayas, <span class='highlighted'>Philippines</span>",
"name": "Boracay Island"
},
{
"geoId": "6123060",
"destinationId": "1716600",
"landmarkCityDestinationId": null,
"type": "AIRPORT",
"redirectPage": "DEFAULT_PAGE",
"latitude": 9.8564,
"longitude": 126.016012,
"caption": "Siargao, <span class='highlighted'>Philippines</span> (IAO-Sayak)",
"name": "Siargao (IAO-Sayak)"
}
]
}],
"geocodeFallback": false
}
$(document).ready(function(){
$.ajaxSetup({ cache: false });
function ajax_loadcontent() {
var searchField = $('#txt_search').val();
var expression = new RegExp(searchField, "i");
/*$.ajax({
url: "location.json",
type: "GET",
dataType: "JSON",
success: function(data) {*/
$('#result').empty();
$("#result").append('<li class="list-group-item pb-2 pt-2 disabled "><b class="small">Popular destination nearby</b></li>');
$.each(data.suggestions[0].entities, function(key, value) {
if (value.name.search(expression) != -1) {
$('#result').append('<li class="list-group-item list-group-item-action" id="'+value.destinationId+'"><i class="fa fa-fw fa-map-marker fa-lg"></i><span class="font-weight-bold" id="'+value.name+'">'+value.name+'</span><br><span class="text-muted small">'+value.caption+'</span></li>');
}
});
/*}
});*/
}
$('#txt_search').keyup(function(){
if (!$('#txt_search').empty() || $(this).val() == '') {
$("#lbl_going_to").html('Going to');
$('#txt_convert').val('');
}
ajax_loadcontent();
});
$("#txt_search").focusin(function(){
ajax_loadcontent();
});
$('#result').on('click', 'li', function() {
var click_text = $(this).text().split('|');
$("#lbl_going_to").html('Going to');
$('#txt_search').val($.trim(click_text[0]));
$('#txt_convert').val($.trim(click_text[0]));
$("#result").html('');
});
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<form method="post">
<div class="row">
<div class="col-6">
<div class="form-group text-left ">
<label id="lbl_going_to">Enter your destination</label>
<input type="text" class="form-control" id="txt_search" name="txt_search" value="" />
<ul class="list-group" id="result"></ul>
</div>
</div>
<div class="col-6">
<label>JSON ID</label>
<input type="text" class="form-control" name="txt_convert" id="txt_convert" value="">
</div>
</div>
</form>
</body>
</html>
Imagine my json file name is location.json and this is my json data
{
"term":"Philippines",
"moresuggestions":25,
"autoSuggestInstance":null,
"trackingID":"",
"misspellingfallback":false,
"suggestions":[
{
"group":"CITY_GROUP",
"entities":[
{
"geoId":"2375",
"destinationId":"1004070",
"landmarkCityDestinationId":null,
"type":"CITY",
"redirectPage":"DEFAULT_PAGE",
"latitude":14.595628,
"longitude":120.974836,
"caption":"Manila, National Capital Region, <span class='highlighted'>Philippines</span>",
"name":"Manila"
},
{
"geoId":"55429",
"destinationId":"986398",
"landmarkCityDestinationId":null,
"type":"CITY",
"redirectPage":"DEFAULT_PAGE",
"latitude":14.10484,
"longitude":120.937943,
"caption":"Tagaytay, Calabarzon, <span class='highlighted'>Philippines</span>",
"name":"Tagaytay"
},
{
"geoId":"9737",
"destinationId":"999341",
"landmarkCityDestinationId":null,
"type":"CITY",
"redirectPage":"DEFAULT_PAGE",
"latitude":14.533413702481994,
"longitude":121.0007313266143,
"caption":"Pasay, National Capital Region, <span class='highlighted'>Philippines</span>",
"name":"Pasay"
},
{
"geoId":"800",
"destinationId":"987200",
"landmarkCityDestinationId":null,
"type":"CITY",
"redirectPage":"DEFAULT_PAGE",
"latitude":10.309726,
"longitude":123.89309,
"caption":"Cebu, Cebu, Central Visayas, <span class='highlighted'>Philippines</span>",
"name":"Cebu"
},
{
"geoId":"9733",
"destinationId":"982835",
"landmarkCityDestinationId":null,
"type":"CITY",
"redirectPage":"DEFAULT_PAGE",
"latitude":14.555021867817619,
"longitude":121.02902303217024,
"caption":"Makati, National Capital Region, <span class='highlighted'>Philippines</span>",
"name":"Makati"
},
{
"geoId":"601371",
"destinationId":"1639027",
"landmarkCityDestinationId":null,
"type":"CITY",
"redirectPage":"DEFAULT_PAGE",
"latitude":11.959059,
"longitude":121.92627,
"caption":"Boracay Island, Western Visayas, <span class='highlighted'>Philippines</span>",
"name":"Boracay Island"
},
{
"geoId":"489",
"destinationId":"998116",
"landmarkCityDestinationId":null,
"type":"CITY",
"redirectPage":"DEFAULT_PAGE",
"latitude":16.404805707244208,
"longitude":120.59425275659193,
"caption":"Baguio, Cordillera Administrative Region, <span class='highlighted'>Philippines</span>",
"name":"Baguio"
}
]
},
{
"group":"TRANSPORT_GROUP",
"entities":[
{
"geoId":"5000781",
"destinationId":"1665690",
"landmarkCityDestinationId":null,
"type":"AIRPORT",
"redirectPage":"DEFAULT_PAGE",
"latitude":14.506506,
"longitude":121.004298,
"caption":"Manila, <span class='highlighted'>Philippines</span> (MNL-Ninoy Aquino Intl.)",
"name":"Manila (MNL-Ninoy Aquino Intl.)"
},
{
"geoId":"4343107",
"destinationId":"1665664",
"landmarkCityDestinationId":null,
"type":"AIRPORT",
"redirectPage":"DEFAULT_PAGE",
"latitude":10.315088,
"longitude":123.979683,
"caption":"Cebu, <span class='highlighted'>Philippines</span> (CEB-Mactan - Cebu Intl.)",
"name":"Cebu (CEB-Mactan - Cebu Intl.)"
},
{
"geoId":"6123060",
"destinationId":"1716600",
"landmarkCityDestinationId":null,
"type":"AIRPORT",
"redirectPage":"DEFAULT_PAGE",
"latitude":9.8564,
"longitude":126.016012,
"caption":"Siargao, <span class='highlighted'>Philippines</span> (IAO-Sayak)",
"name":"Siargao (IAO-Sayak)"
}
]
}
],
"geocodeFallback":false
}