Question

我在thread得到了很多帮助。但是仍然存在一个问题，我现在正在与它斗争几个小时。对于我的自动完成功能，我想使用从我的控制器生成的条目，而不是每次都生成一个数组。我知道如何正常包含我的控制器作为自动完成功能的来源，这对我来说没问题。但是我如何包含我的控制器路径，例如＆＃34; / AutoCompleteFeatures / AutoCompleteSentenceSuggestion＆＃34;在这个小提琴？一切都应该是一样的，只是源不是数组，而是我的控制器路径来提供我需要的值。

JS Fiddle

$(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>

jQuery UI Autocomplete：source适用于数组，但不适用于来自控制器

2 个答案: