jQuery UI 自动完成：源代码适用于数组，但不适用于控制器中的值

Question

我在这个thread 中得到了很大的帮助。但是仍然存在一个问题，我现在已经为此苦苦挣扎了几个小时。对于我的自动完成功能，我想使用从我的控制器生成的条目，而不是每次都生成一个数组。我知道通常如何将我的控制器作为自动完成功能的来源，这对我来说没问题。但是我将如何包含我的控制器路径，例如这个小提琴中的“/AutoCompleteFeatures/AutoCompleteSentenceSuggestion”？一切都应该是一样的，只是源不是数组，而是我的控制器路径来传递我需要的值。

JS 小提琴

$(function () {
    var availableTags = [
        "ActionScript",
        "AppleScript",
    ],
      mL = 3;

    function split(val) {
        return val.split("\n");
    }

    function extractLast(term) {
        return split(term).pop();
    }

    $("#SentenceSuggestionField1")
    .autocomplete({
          minLength: mL,
          source: function (request, response) {
              // delegate back to autocomplete, but extract the last term
              var lastTerm = extractLast(request.term);
              if (lastTerm.length >= mL) {
                  response($.ui.autocomplete.filter(availableTags, lastTerm));
              }
          },
          select: function (event, ui) {
              var terms = split(this.value);
              // remove the current input
              terms.pop();
              // add the selected item
              terms.push("\u2022 " + ui.item.value);
              // Format value to display
              terms.push("");
              this.value = terms.join("\r\n");
              return false;
          }
      });
});
`

我已经为此苦苦挣扎了几个小时，并尝试了许多不同的方法。但是这些都没有奏效，例如我试图用数据库中的值创建一个 JS 数组，并像在小提琴中那样使用它，但这没有成功。我尝试了几个以我的控制器路径作为源的示例，但这也没有成功......所以我希望你对我有一个提示或提示，如何做到这一点。谢谢！

根据请求控制器操作：

public JsonResult AutoCompleteField1(string term)
{
    var data = db.SentenceSuggestions
        .Where(s => s.SuggestionText.ToLower()
        .Contains(term.ToLower()))
        .Select(x => new { label = x.SuggestionText })
        .ToArray();
    return Json(data, JsonRequestBehavior.AllowGet);
}

Answer 1

这是工作代码，包括 ajax 调用：

$("#SentenceSuggestionField1")
    .autocomplete({
          minLength: mL,
          source: function (request, response) {
              $.ajax({
                  type: "GET",
                  url: "/AutoComplete/AutoCompleteField1/",
                  data: { term: extractLast(request.term) },
                  contentType: "application/json",
                  dataType: "json",
                  success: function (result) {
                      var lastTerm = extractLast(request.term);
                      if (lastTerm.length >= mL) {
                          response($.ui.autocomplete.filter(result, lastTerm));
                      }
                  }
              })
          },
          select: function (event, ui) {
              var terms = split(this.value);
              // remove the current input
              terms.pop();
              // add the selected item
              terms.push("\u2022 " + ui.item.value);
              // Format value to display
              terms.push("");
              this.value = terms.join("\r\n");
              return false;
          }
      });

Answer 2

保持简单。

这是我的一个项目中的工作示例：

服务器端：

    public ActionResult autocomplete(string term)
    {
        var terms = _termRepository.search(term);
        var result = new List<AutocompleteTerm>();

        foreach (var item in terms)
        {
            result.Add(new AutocompleteTerm { id = item.id, label = item.term_name, value = item.term_name, description = item.term_description , termclass = (int)item.term_class});
        }
        return Json(result, JsonRequestBehavior.AllowGet);
    }

术语类：

public class AutocompleteTerm
{
    public int id;
    public string description;
    public string label;
    public string value;
    public int termclass;
}

jQuery:

var url = '/terms/autocomplete';

$('#search').autocomplete({
                source: url,
                minLength: 2,
                width: 800,
                select: function (event, ui) {
                    $('#result').html(ui.item.description);
                    $('#result-class').html(ui.item.termclass);
                    $('.results').show();
                }
            });

HTML

<input type="search" placeholder="search" class="form-control" id="search">

<div class="top-buffer display-none results">
<blockquote id="result"></blockquote>
<blockquote>Class: <span id="result-class"></span></blockquote>
</div>