选择 json 数据中的一个值并使用 jquery/ajax 转换为 json 数据中的另一个值答案

【问题标题】：Select a value in json data and convert into another value in json data using jquery/ajax选择 json 数据中的一个值并使用 jquery/ajax 转换为 json 数据中的另一个值
【发布时间】：2021-03-20 05:20:56
【问题描述】：

下午好，伙计们，我花了一整天的时间来解决这个问题，但我的代码似乎不起作用。我怎样才能做到这一点我希望你能帮助我:(

我想知道是否可以将选定的json数据转换为另一个值。

我给你举个例子：

第一个问题是：如果我选择 Manila，它将在另一个文本框中显示 DestinationID 而不是字符串。

第二个问题是：当您选择目的地时，我想显示值 "Manila" 您可以查看下面的图片...

这是我当前来自左侧文本框的输出，问题在于 json 数据 Name 和 caption 中的两个值合并在一个文本框中。 Click to view

所以这是我想要实现的.. Click to view

这是您开始选择时的外观。如果我选择其中之一，我想显示一个仅值示例：Manila

顺便说一下，这是我的代码。

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>

假设我的 json 文件名为 location.json，这是我的 json 数据

            {
           "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
        }

【问题讨论】：

标签： javascript php jquery json ajax

【解决方案1】：

您已经将目标 ID 的值分配给您的 li 所以当 li 点击获取id 使用.attr('id') 然后将其分配给您的输入框。

演示代码：

//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>

【讨论】：

显示中的标题不见了，先生
这是正确的，先生？我这里有一个代码，但似乎我没有达到我想要的输出
$('#result').on('click', 'li', function() { var click_text = $(this).text().split('|'); var desti_id = $(this).attr('id'); var desti_name = $("#result li span").attr('id'); $('#txt_search').val($.trim(desti_name) ); $("#lbl_going_to").html('Going to'); $('#txt_convert').val($.trim(desti_id)); $("#result").html(''); });
嗨，你说的是哪个标题？另外，您是否尝试过上面我进行更改的 jquery 代码？为什么你需要在这里做var click_text = $(this).text().split('|');？
我在上面更新了我的代码 sn-p。您的代码有效，但列表中的标题不见了