jQuery AutoComplete does not show up

Question

Inside a jquery dialog I would like to use the jquery autocomplete feature of jqueryUI.

I have then prepared an action in my Controller (I am using ASP.NET MVC2) that is as follow

public ActionResult GetForos(string startsWith, int pageSize)
{
    // get records from underlying store
    int totalCount = 0;
    string whereClause = "Foro Like '" + startsWith + "%'";
    List<Foro> allForos = _svc.GetPaged(whereClause, "Foro", 0, pageSize, out totalCount);

    //transform records in form of Json data
    List<ForoModelWS> foros = new List<ForoModelWS>();
    foreach ( Foro f in allForos)
        foros.Add( new ForoModelWS() { id= Convert.ToString(f.ForoId), 
            text= f.Foro + ", Sezione: " + f.Sezione + ", " + f.AuthorityIdSource.Name });

    return Json(foros);
}

The class ForoModelWS is a simple class used only to hold the data that shall be transferred in json. Here it is

public class ForoModelWS
{
    public string id;
    public string text;
}

On the client side I have the following jquery code:

<input id="theForo" />

<script type="text/javascript">
    $(document).ready(function() {

        $("#theForo").autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "post",
                    url: "/Foro/GetForos",
                    dataType: "json",
                    data: {
                        startsWith: request.term,
                        pageSize: 15
                    },
                    success: function(data) {
                        response($.map(data, function(item) {
                            return {
                                label: item.text,
                                value: item.text
                            }
                        }))
                    }
                })
            },
            minLength: 2,
            select: function(event, ui) {
            },
            open: function() {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function() {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });

    });
</script>

But the sliding window with the suggeestions does not appear. If I put an alert inside the response function I can see the correct data.

Do I miss something?

Thanks for helping

1st EDIT: Moreover, How to change the code to use the "id" property of the selected element in the returned list?

2nd EDIT: I have checked more with Chrome developer tool and I have seen that when autocomplete starts some error appear. the following:

Uncaught TypeError: Cannot call method 'zIndex' of undefined  @ _assets/js/jquery-ui-1.8.4.custom.min.js:317
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:321
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:320

It seems that the autocomplete plugin does not find an element when it tries to set the z-Index of the sliding suggestion 1 level up its container. The first error appear when the jquery UI Dialog opens. The input for the autocomplete is inside a jquery tab that is inside a jquery Dialog

3rd EDIT: I am adding the HTML markup to be complete

<td width="40%">
   <%= Html.LabelFor(model => model.ForoID)%>
   <br />
   <%= Html.HiddenFor(model => model.ForoID) %>
   <input id="theForo" />
   <%= Html.ValidationMessageFor(model => model.ForoID, "*")%>
</td>

Answer 1

I have found the problem.

In my case I was using also another plugin, this one.

That plugin was included at the end of my scripts and caused the error described in the question. I have removed the plugin and everything work very fine.

Before removing it I have tried also to isolate the problem putting in a static html both the scripts. I experienced that even the simplest usage of the autocomplete features, like this

<script type="text/javascript">
$(document).ready(function() {

    var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
    "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
    "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];

    $("#theForo").autocomplete({
        source: availableTags
    });
});
</script>

would cause the error I got.

My choice has been to remove the menu plugin even because that code is'nt supported anymore.

Thanks!

Answer 2

This discussion is really old however adding it here just in case it helps someone...If the autocomplete is not working at all as in the drop down does not show up then first check for the most simple form of it with hard coded suggestions like below.

$("#txtLanguage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });

If this does not work then it IS a problem of jquery scripts linked. In my case jquery.min.js was an older version 1.7.1 whereas all other scripts were 1.8.18.

Simply replacing the correct version of script solved the problem.

Hope this helps someone stumbling with the basic problem of getting autocomplete to work.

Answer 3

Just like I answered here, take a loot at my working example of jQuery UI's autocomplete. Pay attention to the source part. Hope it helps:

    var cache = {};
    $("#textbox").autocomplete({
      source: function(request, response) {
       if (request.term in cache) {
        response($.map(cache[request.term].d, function(item) {
         return { value: item.value, id: item.id }
        }))
        return;
       }
       $.ajax({
        url: "/Services/AutoCompleteService.asmx/GetEmployees",  /* I use a web service */
        data: "{ 'term': '" + request.term + "' }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataFilter: function(data) { return data; },
        success: function(data) {
         cache[request.term] = data;
         response($.map(data.d, function(item) {
          return {
           value: item.value,
           id: item.id
          }
         }))
        },
        error: HandleAjaxError  // custom method
       });
      },
      minLength: 3,
      select: function(event, ui) {
       if (ui.item) {
        formatAutoComplete(ui.item);   // custom method
       }
      }
     });

If you're not doing so by now, get Firebug. It's an invaluable tool for web development. You can set a breakpoint on this JavaScript and see what happens.

Answer 4

fgmenu Using the function menu() AND autocomplete Using the function

The function name is the same problems occur

You can change the function name in the fgmenu.js

  $('#hierarchybreadcrumb6').menuA({content: $('#hierarchybreadcrumb6').next().html(),backLink: false});

Answer 5

based on Lorenzo answer i modified

$.fn.fgmenu = function(options) { ... 

to

$.fn.fgmenu = function(options) { ...    

from this plugins menu and it worked fine (both autocomplete and menu plugin)