show a dialog box , when hovering over the auto complete records

Question

I have the following JavaScript code to do an autocomplete:

$("#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);
                    }
                });
            },

        });

And I am returning the autocomplete records as 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);
    }
}

But my question is how I can show a dialog the contains additional info about the record, when the user hovers over an autocomplete record. what i am thinking of is as follows:

1. when the user hovers over any autocomplete record, to fire a JavaScript function.
2. the function calls an action method, that returns JSON.
3. to build the dialog box using the returned JSON object.

Answer 1

First you need to create a div let's say with the id=mydiv which can be a dialog. Initialize it as a dialog. Then in your autocomplete use focus event. Which will handle an Ajax function which will call an Action (this action can return a Partial view) and will fill your div with the description.

   $("#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();
                          }
               });

            }

    });

I gave you lines, you have to create another action which will receive a parameter, can send a partial view or just string.

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

I hope it will help.