jQuery completamento automatico non si presenta

Question

All'interno di un jQuery Finestra di dialogo vorrei utilizzare la funzione di completamento automatico di jquery jQueryUI.

Ho quindi preparato un'azione nel mio Controller (sto usando ASP.NET MVC2), che è la seguente

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

I ForoModelWS classe è una classe semplice utilizzato solo per contenere i dati che devono essere trasferiti in JSON. Qui è

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

Sul lato client ho il seguente codice 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>

Ma non appare la finestra scorrevole con i suggeestions. Se ho messo un avviso all'interno della funzione di risposta posso vedere i dati corretti.

mi manca qualcosa?

Grazie per l'aiuto

1 ° EDIT : Inoltre, Come cambiare il codice per utilizzare la proprietà "id" dell'elemento selezionato nella lista restituita?

2 ° EDIT : Ho controllato con più strumento di sviluppo Chrome e ho visto che quando inizia completamento automatico compare qualche errore. quanto segue:

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

Sembra che il plugin autocomplete non trova un elemento quando si tenta di impostare lo z-index dello scorrimento suggestione 1 salire di livello il suo contenitore. Il primo errore viene visualizzato quando il jQuery UI Dialog apre. L'ingresso per il completamento automatico è all'interno di una scheda jquery che è all'interno di un dialogo jquery

3 ° EDIT : Sto aggiungendo il markup HTML per essere 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

ho trovato il problema.

Nel mio caso ho usato anche un altro plugin, questo .

Questo plugin è stato incluso alla fine dei miei script e ha causato l'errore descritto nella domanda. Ho rimosso il plugin e tutto il lavoro molto bene.

Prima di rimuovere lo ho cercato anche di isolare il problema mettendo in html statico entrambi gli script. Ho sperimentato che anche l'utilizzo più semplice delle caratteristiche di completamento automatico, come questo

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

potrebbe causare l'errore che ho ottenuto.

La mia scelta è stata quella di rimuovere il menu plug-in, anche perché quel codice is'nt più supportato.

Grazie!

Answer 2

Questa discussione è molto vecchio ma aggiungendo lo stesso, tanto nel caso in cui si aiuta qualcuno ... Se il completamento automatico non funziona affatto come in giù goccia non si presenta poi primo controllo per la semplice forma più di esso con hard suggerimenti codificati come qui di seguito.

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

Se questo non funziona, allora è un problema di script jQuery collegato. Nel mio caso jquery.min.js era una vecchia versione 1.7.1, mentre tutti gli altri script erano 1.8.18.

Semplicemente sostituendo la versione corretta dello script ha risolto il problema.

Spero che questo aiuti qualcuno che inciampa con il problema di fondo di ottenere completamento automatico al lavoro.

Answer 3

Proprio come ho risposto qui , prendere un bottino al mio esempio funzionante di completamento automatico di jQuery UI. Prestare attenzione alla parte source. Speranza che aiuta:

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

Se non stai facendo così, ormai, ottenere Firebug . Si tratta di uno strumento prezioso per lo sviluppo web. È possibile impostare un punto di interruzione su questo JavaScript e vedere cosa succede.

Answer 4

fgmenu Utilizzando il menu delle funzioni () e completare automaticamente Utilizzando la funzione

Il nome della funzione è gli stessi problemi si verificano

È possibile modificare il nome della funzione nelle fgmenu.js

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

Answer 5

sulla base di Lorenzo risposta che ho modificato

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

a

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

menù e ha funzionato bene (sia di completamento automatico e il menu plugin)