MVC jQuery自动完成 - 无法在选择事件中获取可点击链接的url答案

【问题标题】：MVC jQuery autocomplete - unable to grab url in select event for clickable linksMVC jQuery自动完成 - 无法在选择事件中获取可点击链接的url
【发布时间】：2020-11-25 20:10:33
【问题描述】：

我正在对 MVC 控制器进行 ajax 调用。它返回一个 JsonResponse 供 jQuery 自动完成使用。在自动完成的“源”部分，我可以从 JSON 中访问属性。 下拉菜单工作正常。

但是在使用 select 事件时，ui 变量为“label”和“value”显示相同的值。这是 displayText 的值（见下面的代码）。文档建议我应该能够通过在选择事件中执行“ui.item.url”来访问我的 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
  }
});

【问题讨论】：

标签： c# jquery asp.net-mvc autocomplete

【解决方案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;
    }
});

【讨论】：