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

我有以下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的操作方法

使用返回的JSON对象构建对话框

---

首先，您需要创建一个

div

，比方说使用

id=mydiv

，它可以是一个。将其初始化为对话框。 然后在自动完成中使用

focus

事件。它将处理一个Ajax函数，该函数将调用一个动作（该动作可以返回部分视图），并用描述填充您的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
  }

---

我希望这会有帮助。

看来你已经找到了问题的答案。我不是下一个投票人。@Inanikian我遗漏了两点，当鼠标悬停在自动完成记录上时，谁能强迫jquery函数启动？第二点是如何动态构建jquery对话框？感谢您的回复，但我应该将$（“#mydiv”）.dialog（）放置在何处，因为我需要对话框自动显示在自动完成记录上？您可以将它放在文本框之后。通过CSS，您可以编辑规则，并在显示时将其显示出来