Select a value in json data and convert into another value in json data using jquery/ajax

Viewed 87

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 Click to view

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
        }
1 Answers

You are already assigning value of destination id to your li so when li is clicked get id using .attr('id') then assign same to your input-box .

Demo Code :

//just for demo,,
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).find("span.font-weight-bold").text() //get text
    var id = $(this).attr('id') //get id
    $("#lbl_going_to").html('Going to');
    $('#txt_search').val($.trim(click_text)); //assign text
    $('#txt_convert').val($.trim(id)); //assign id
    $("#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>

Related