jQuery saisie semi-automatique ne se présente pas

Question

Dans une jquery boîte de dialogue des Je voudrais utiliser la fonction jquery autocomplete de jQueryUI.

J'ai ensuite préparé une action dans mon contrôleur (j'utilise ASP.NET MVC2) qui est le suivant

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

La classe ForoModelWS est une classe simple utilisée uniquement pour contenir les données qui seront transférées dans JSON. Ici, il est

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

Du côté client, j'ai le code jquery suivant:

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

Mais la fenêtre coulissante avec les ne semble pas suggeestions. Si je mets une alerte dans la fonction de réponse que je peux voir les données correctes.

Dois-je raté quelque chose?

Merci de nous aider

1er EDIT : De plus, Comment changer le code pour utiliser la propriété « id » de l'élément sélectionné dans la liste renvoyée?

2ème EDIT : J'ai vérifié plus avec l'outil de développeur Chrome et je l'ai vu que lorsque autocomplete commence une erreur apparaît. ce qui suit:

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

Il semble que le plugin autocomplete ne trouve pas un élément lorsqu'il tente de définir le z-index de la suggestion de glissement 1 niveau son récipient. La première erreur apparaît lorsque l'interface de dialogue ouvre jquery. L'entrée pour le remplissage automatique est à l'intérieur d'une languette de jquery qui est à l'intérieur d'une boîte de dialogue jquery

3 EDIT : J'ajoute le balisage HTML pour être complet

<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

J'ai trouvé le problème.

Dans mon cas, j'utilisais aussi un autre plug-in, celui-ci .

Ce plugin a été inclus à la fin de mes scripts et a provoqué l'erreur décrite dans la question. J'ai supprimé le plug-in et tout travail très bien.

Avant de le retirer, j'ai essayé aussi d'isoler le problème de mettre en html statique à la fois les scripts. Je l'ai vécu, même l'utilisation la plus simple des fonctionnalités de saisie semi-automatique, comme celui-ci

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

causerait l'erreur que je suis arrivé.

Mon choix a été de supprimer le menu du plugin même parce que is'nt de code plus pris en charge.

Merci!

Answer 2

Cette discussion est vraiment vieux cependant ajouter ici juste au cas où il aide quelqu'un ... Si la saisie semi-automatique ne fonctionne pas du tout comme dans le bas de baisse ne se présente pas alors vérifiez d'abord la forme la plus simple avec disque suggestions codées comme ci-dessous.

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

Si cela ne fonctionne pas alors il est un problème de scripts jquery liés. Dans mon cas jquery.min.js était une ancienne version 1.7.1 alors que tous les autres scripts étaient 1.8.18.

Il suffit de remplacer la version correcte du scénario a résolu le problème.

Espérons que cela aide quelqu'un trébucher avec le problème fondamental d'obtenir autocomplete au travail.

Answer 3

Tout comme je lui ai répondu ici , prendre un butin à mon exemple de travail de saisie semi-automatique jQuery UI. Faites attention à la partie source. 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
       }
      }
     });

Si vous ne pas le faire maintenant, obtenir Firebug . Il est un outil précieux pour le développement web. Vous pouvez définir un point d'arrêt sur ce JavaScript et voir ce qui se passe.

Answer 4

fgmenu Utilisation du menu de fonction () et saisie semi-automatique Utilisation de la fonction

Le nom de la fonction est les mêmes problèmes se produisent

Vous pouvez modifier le nom de la fonction dans les fgmenu.js

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

Answer 5

basé sur Lorenzo réponse que je modifié

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

à

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

dans ce menu plugins et il a bien fonctionné (à la fois autocomplete et plug-in menu)