jQuery Autocompletar no aparece

Question

Dentro de un diálogo de jquery me gustaría utilizar la función de autocompletar jquery de jqueryUI.

entonces me han preparado una acción en mi Controlador (estoy usando ASP.NET MVC2) que es como sigue

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); 
} 

Los ForoModelWS clase es una clase simple que se usa solamente para contener los datos que se transfieren en json. Aquí es

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

En el lado del cliente Tengo el siguiente código de jQuery:

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

Pero no aparece la ventana deslizante con los suggeestions. Si pongo una alerta dentro de la función de respuesta, puedo ver los datos correctos.

¿Extraño algo?

Gracias por ayudar a

primera EDITAR: Por otra parte, cómo cambiar el código para utilizar la propiedad "id" del elemento seleccionado en la lista devuelta?

2nd EDIT: He comprobado más con la herramienta de desarrollador de Chrome y he visto que cuando se inicia autocompletar aparece algún error. lo siguiente:

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 

Parece que el plugin autocompletar no encuentra un elemento cuando se trata de establecer el índice z de la corredera nivel sugerencia 1 hasta su contenedor. El primer error aparece cuando se abre el cuadro de diálogo de la interfaz de usuario de jquery. La entrada para la función de autocompletar está dentro de una pestaña jQuery que está dentro de un jQuery diálogo

3ª EDICIÓN: Estoy añadiendo el formato HTML para ser completa

<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

He encontrado el problema.

En mi caso estaba usando otro complemento, this one.

Ese complemento se incluyó al final de mis scripts y provocó el error descrito en la pregunta. He eliminado el complemento y todo funciona muy bien.

Antes de eliminarlo, he intentado también aislar el problema al poner en html estático ambos scripts.Experimenté que incluso el uso más simple de las funciones de autocompletar, como este

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

causaría el error que obtuve.

Mi elección ha sido eliminar el complemento de menú incluso porque ese código ya no es compatible.

Gracias!

Answer 2

Al igual que respondí here, tomar un botín en mi ejemplo de trabajo de autocompletar de jQuery UI. Preste atención a la parte source. Creo que sirve:

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 
     } 
     } 
    }); 

Si usted no está haciendo así que por ahora, conseguir Firebug. Es una herramienta invaluable para el desarrollo web. Puede establecer un punto de interrupción en este JavaScript y ver qué pasa.

Answer 3

basado en Lorenzo respuesta modifiqué

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

a

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

de estos plugins menu y funcionó bien (tanto autocompletar y el menú plugin)

Answer 4

Esta discusión es muy viejo sin embargo agregándolo aquí solo en caso de que ayude a alguien ... Si la función de autocompletar no funciona en absoluto, ya que en el menú desplegable no aparece, compruebe primero el más simple e forma de ello con sugerencias codificadas como las siguientes.

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

Si esto no funciona, entonces ES un problema de scripts jquery vinculados. En mi caso jquery.min.js era una versión anterior 1.7.1, mientras que todos los demás scripts eran 1.8.18.

Simplemente reemplazando la versión correcta del script resolvió el problema.

Espero que esto ayude a alguien a tropezar con el problema básico de obtener autocompletar para funcionar.

Answer 5

fgmenu Usando el menú de funciones() y la función de autocompletar Usando

El nombre de la función es los mismos problemas ocurren

Se puede cambiar el nombre de función en los fgmenu.js

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