MVC jQuery автозаполнение - невозможно получить URL-адрес в событии выбора для интерактивных ссылок

Question

Я делаю вызов ajax контроллеру MVC. Он возвращает JsonResponse для использования автозаполнения jQuery. В разделе «Источник» автозаполнения я могу получить доступ к свойствам из файла JSON. Выпадающий список работает нормально.

Но когда дело доходит до использования события select, переменная ui показывает одно и то же значение для «label» и «value». Каково значение displayText (см. Код ниже). Документация предполагает, что я должен иметь возможность получить доступ к своему свойству URL, выполнив "ui.item.url" в событии select

Я хочу иметь возможность получить URL-адрес, который я передаю с моего контроллера в событие выбора.

Вот код:

Контроллер:

public async Task<ActionResult> AutocompleteAndSuggest(string term)
{

    // Create an empty list.
    var results = new List<ServiceProviderResults>();


    for (int i = 0; i < suggestResult.Results.Count; i++)
    {
        // Now add the suggestions.
        results.Add(new ServiceProviderResults { url = $"DYNAMIC URL HERE", displayText = $"{suggestResult.Results[i].Document.companyname} ({suggestResult.Results[i].Document.serviceproviderid})" });
    }

    // Return the list.
    return new JsonResult(results);
}

jQuery

$('#autocomplete').autocomplete({
  delay: 500,
  minLength: 2,
  position: {
    my: "left top",
    at: "left-23 bottom+10"
  },
  source: function(request, response) {
    var controllerUrl = "/Home/AutoCompleteAndSuggest?term=" + $("#autocomplete").val();
    $.ajax({
      url: controllerUrl,
      dataType: "json",
      success: function(data) {
        if (data && data.length > 0) {

          // Show the autocomplete suggestion.
          document.getElementById("underneath").innerHTML = data[0].displayText;

          // Remove the top suggestion as it is used for inline autocomplete.
          var array = new Array();
          for (var n = 1; n < data.length; n++) {
            array[n - 1] = data[n].displayText;
          }

          // Show the drop-down list of suggestions.
          response(array);
        } else {
          document.getElementById("underneath").innerHTML = "";
        }
      }
    });
  },
  select: function(event, ui) {
    console.log(ui); // ui.item has "label" and "value", both are equal to displayText
    window.location.href = ui.item.url
  }
});

Answer 1

Вот что я сделал с автозаполнением, и он отлично работает для меня:

JS код:

let arrivalId = [];
fetch(arrivalUrl).then(
    response => response.json()
).then(data => {
    if (dataIsValid(data)) {
        Array.prototype.push.apply(
            arrivalId,
            JSON.parse(data.data)
        );
    }
});

$("#autocomplete").autocomplete({
    minLength: 0,
    source: (request, response) => {
        var results;
        var aData = $.map(arrivalId, (value, key) => {
            return {
                label: value.Value,
                value: value.Key
            };
        });
        results = $.ui.autocomplete.filter(aData, request.term);
        response(results);
    },
    select: (event, ui) => {
        $("#autocomplete").val(ui.item.label);
        return false;
    }
});