jQuery Autocompletar no aparece

Question

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

a continuación, han preparado una acción en mi Controlador (estoy usando ASP.NET MVC2) que es el siguiente

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 transferirán 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>

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

Do Me he perdido algo?

Gracias por ayudarnos

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

2a Edición : He comprobado con más herramientas para desarrolladores 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. aparece el primer error cuando el jQuery UI de diálogo se abre. La entrada para la función de autocompletar está dentro de una pestaña jquery que está dentro de un jquery de diálogo

tercera editar : 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 yo estaba usando también otro plugin, éste .

Ese complemento se incluye al final de mis guiones y provocó el error descrito en la pregunta. He quitado el plugin y todo el trabajo muy bien.

Antes de retirar que he intentado también para aislar el problema de poner en un HTML estático tanto los guiones. He experimentado 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 tengo.

Mi elección ha sido la de eliminar el menú de plugins incluso a causa de que el código is'nt apoyado más.

Gracias!

Answer 2

Esta discusión es muy viejo sin embargo añadir que aquí sólo en caso de que ayuda a alguien ... Si el autocompletado no funciona en absoluto como en el descenso hacia abajo no se presenta a continuación, primer cheque para la forma simple mayor parte de ella con fuerza sugerencias codificados como a continuación.

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

Si esto no funciona, entonces es un problema de secuencias de comandos de jQuery vinculado. En mi caso jquery.min.js era una versión anterior 1.7.1, mientras que todos los demás guiones eran 1.8.18.

Simplemente reemplazando la versión correcta de la escritura resuelto el problema.

Espero que esto ayude a alguien que tropieza con el problema básico de conseguir autocompletar de trabajo.

Answer 3

Al igual que respondió aquí , tomar un botín en mi ejemplo de trabajo de autocompletar de jQuery UI. prestar atención a la parte source. Espero que ayude:

    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 muy valiosa para el desarrollo web. Se puede establecer un punto de interrupción en este JavaScript y ver qué pasa.

Answer 4

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

El nombre de la función es el mismo problema se producen

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

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

Answer 5

basado en Lorenzo respuesta que modifiqué

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

a

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

menú y funcionó bien (tanto autocompletar y menú de plug-in)