Question

我有以下JavaScript代码来执行自动完成功能：

$("#Technology2_Tag").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "@Url.Content("~/Switch/AutoComplete2")",
                    dataType: "json",
                    minLength: 2, delay: 2000,
                    data: {
                        term: request.term,
                        SearchBy: $("#ChoiceTag").prop("checked") ? $("#ChoiceTag").val() : $("#ChoiceName").val(),
                    },
                    success: function (data) {
                        response(data);
                    }
                });
            },

        });

我将自动完成记录作为JSON返回：

public ActionResult AutoComplete2(string term, string SearchBy)
{
    if (SearchBy == "Tag")
    {
        var tech = repository.AllFindTechnolog(term).OrderBy(p => p.Tag).Select(a => new { label = a.Tag }).ToList();
        return Json(tech, JsonRequestBehavior.AllowGet);
    }
    else
    {
        var tech = repository.FindActiveResourceByName(term, true).OrderBy(p => p.RESOURCENAME).Select(a => new { label = a.RESOURCENAME }).ToList();
        return Json(tech, JsonRequestBehavior.AllowGet);
    }
}

但我的问题是当用户将鼠标悬停在自动完成记录上时，我如何能够显示包含有关记录的其他信息的对话框。我在想的是：

当用户将鼠标悬停在任何自动填充记录上时，触发JavaScript函数。
该函数调用一个返回JSON的action方法。
使用返回的JSON对象构建对话框。

Answer 1

首先，您需要使用div创建id=mydiv，这可以是dialog。将其初始化为对话框。然后在您的自动填充中使用focus事件。这将处理将调用Action的Ajax函数（此操作可以返回Partial视图）并将使用描述填充div。

   $("#mydiv").dialog();
   $ ("#Technology2_Tag").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "@Url.Content("~/Switch/AutoComplete2")",
                dataType: "json",
                minLength: 2, delay: 2000,
                data: {
                    term: request.term,
                    SearchBy: $("#ChoiceTag").prop("checked") ? $("#ChoiceTag").val() : $("#ChoiceName").val(),
                         },
                success: function (data) {
                    response(data);
                          }
               });
            },
     focus: function(event,ui){
         var element =ui.item.val;
            $.ajax({
                url: "@Url.Content("~/Switch/ActionDescription")",
                dataType: "json",
                data: {
                    hoverelment: element },
                success: function (data) {
                    $('#myDiv').append(data);
                    $('#myDiv').show();
                          }
               });

            }

    });

我给你了一些行，你必须创建另一个接收参数的动作，可以发送部分视图或只是字符串。

  public ActionResult ActionDescription(string hoverlement)
  {
   .........//linq queries to retrieve description by hoverelement
  }

我希望它会有所帮助。

将鼠标悬停在自动完成记录上时显示一个对话框

1 个答案: