JQuery 自动完成不同的建议和基于使用 JSON 文件的输入值的另一个建议

Question

I'm trying to fetch data using json file and jquery, my script works fine but the problem is the array with the same value also displaying on autocomple suggestion. I tried a lot of approach like reduce method but no luck, it shows only 1 location. I also want to make autocomplete suggestion inside suggestion, you can see on the photo what I'm trying to achieve and what I have achieved so far. Can you please give me an idea on how to do that because I'm newbie on json data fetching and it's not easy like how it is using database and server-side language like PHP.

<script>
$( document ).ready(function() {
$('#check-in').hide();
$('#lets-go').hide();

var arrayReturn = [];
$.ajax({
type: "GET",
url: "locprop.json",
async: true,
success: function (data) {
 for (var i = 0, len = data.length; i < len; i++) {
 var id = (data[i].id).toString();
 arrayReturn.push({'value' : data[i].location, 'data' : id});
}

var uniqueCity = Array.from(arrayReturn.reduce((map, obj) => map.set(obj.location, obj),new Map()).values());
                                
         console.log(uniqueCity);
         loadSuggestions(uniqueCity);
        }
      });

       function loadSuggestions(options) {
        $('#destination').autocomplete({
       lookup: options,

       onSelect: function (suggestion) {
        $('#destination').html(suggestion.value);
        $('#check-in').show();
        $('#lets-go').show();                       }
     });
    }
 });
</script>

MY JSON FILE

[
  {
    "id": 1,
    "location": "El Nido",
    "property": "El Nido Hotel 1",
    "url": "https://drive.google.com/uc?export=view&id=1s1GOpqujbUbBXaSde5He29jO0aWWrK9C",
    "body": "This is Elnido Hotel 1"
  },
  { 
    "id": 2,
    "location": "El Nido",
    "property": "El Nido Hotel 2",
    "url": "https://drive.google.com/uc?export=view&id=1Kdyrq5qLXgL8Cwuz1Ekz6gUyj7qhczHp",
    "body": "This is Elnido Hotel 2"
  },
  {
    "id": 3,
    "location": "El Nido",
    "property": "El Nido Hotel 3",
    "url": "https://drive.google.com/uc?export=view&id=16fiBYsg-9o9kPhkzMaeFU5J2mH9Lk4be",
    "body": "This is Elnido Hotel 3"
  },
  {
    "id": 4,
    "location": "Boracay",
    "property": "Boracay Hotel 1",
    "url": "https://drive.google.com/uc?export=view&id=13XG6Vjr2wbqwxfO_HG1K1NhFJPzsfG_K",
    "body": "This is Boracay Hotel 1"
  },
  {
    "id": 5,
    "location": "Boracay",
    "property": "Boracay Hotel 2",
    "url": "https://drive.google.com/uc?export=view&id=1IMg1e8f8b_znWs_57VrNzN6RumbWpadm",
    "body": "This is Boracay Hotel 2"
  },
  {
    "id": 6,
    "location": "Davao",
    "property": "Davao Hotel 1",
    "url": "https://drive.google.com/uc?export=view&id=1fOiTOp5AEjJf0-r75S8C4Bz4im24LssS",
    "body": "This is Davao Hotel 1"
  }
]

Answer 1

I'm not sure I totally follow what the issue is as your reduce logic seams to work, I wonder if its how you are then mapping it in your auto complete, you are using "lookup" but if you use "source" and map the array so that it has label and value, I believe it should work as you desire, here is an example using you array but note how I'm mapping it to have label and value, I then just tweaked your autocomplete slightly

 var data = [{ "id": 1, "location": "El Nido", "property": "El Nido Hotel 1", "url": "https://drive.google.com/uc?export=view&id=1s1GOpqujbUbBXaSde5He29jO0aWWrK9C", "body": "This is Elnido Hotel 1" }, { "id": 2, "location": "El Nido", "property": "El Nido Hotel 2", "url": "https://drive.google.com/uc?export=view&id=1Kdyrq5qLXgL8Cwuz1Ekz6gUyj7qhczHp", "body": "This is Elnido Hotel 2" }, { "id": 3, "location": "El Nido", "property": "El Nido Hotel 3", "url": "https://drive.google.com/uc?export=view&id=16fiBYsg-9o9kPhkzMaeFU5J2mH9Lk4be", "body": "This is Elnido Hotel 3" }, { "id": 4, "location": "Boracay", "property": "Boracay Hotel 1", "url": "https://drive.google.com/uc?export=view&id=13XG6Vjr2wbqwxfO_HG1K1NhFJPzsfG_K", "body": "This is Boracay Hotel 1" }, { "id": 5, "location": "Boracay", "property": "Boracay Hotel 2", "url": "https://drive.google.com/uc?export=view&id=1IMg1e8f8b_znWs_57VrNzN6RumbWpadm", "body": "This is Boracay Hotel 2" }, { "id": 6, "location": "Davao", "property": "Davao Hotel 1", "url": "https://drive.google.com/uc?export=view&id=1fOiTOp5AEjJf0-r75S8C4Bz4im24LssS", "body": "This is Davao Hotel 1" } ] var uniqueCity = jQuery.map(Array.from(data.reduce((map, obj) => map.set(obj.location, obj), new Map()).values()), function(x, i) { return { value: x.location, label: x.property, id: x.id, body: x.body, url: x.url, }; }) console.log(uniqueCity) $("#destination").autocomplete({ source: uniqueCity, focus: function(event, ui) { $("#destination").val(ui.item.label); return false; }, select: function(event, ui) { $("#destination").val(ui.item.label); console.log(ui.item.body) console.log(ui.item.id) console.log(ui.item.label) console.log(ui.item.value) console.log(ui.item.url) return false; } })

 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <input id="destination">

I hope this helps