jQuery UI Autocomplete JSON gibt Fehler: Uncaught TypeError: Kann 'in' Operator nicht verwenden, um nach '62' in

Question

zu suchen Ich habe eine Menge Probleme, Autocomplete zu erhalten, um auf meiner Seite zu arbeiten. Wenn ich zwei Zeichen ("OW") in meine Sucheingabe eingeben, bekomme ich das Preloader-Bild (siehe unten), aber es verschwindet nie und ich bekomme nie das Autocomplete-Popup. Mit Blick auf die Konsole in Chrome zeigt:

Uncaught TypeError: Cannot use 'in' operator to search for '62' in [{"value":103,"label":"FLOWER"},{"value":105,"label":"YELLOW"}] 

Hier die aktuelle Zeichenfolge, die (bestätigt durch das Hinzufügen eines alert (Daten) in den Erfolg Block) zurückgegeben wird:

[{"kwrdID":103,"kwrdKeyWord":"FLOWER"},{"kwrdID":105,"kwrdKeyWord":"YELLOW"}] 

Hier ist die Haupt Code für die Autocomplete

$("#searchInput").autocomplete({ 
source: function (request, response) { 
    $.ajax({ 
     url: '@Url.Action("GetKeywords", "Home")', 
     dataType: "json", 
     data: { 
      SearchTerm: request.term 
     }, 
     success: function (data) { 
      response($.map(data.keywords, function (item) { 
       return { 
        label: item.kwrdKeyWord, 
        value: item.kwrdID 
       } 
      })); 
     } 
    }); 
}, 
    minLength: 2 
}); 

Und schließlich ist hier die preloader (für alle Fälle ist es im Zusammenhang).

$(document).ajaxStart(function() { 
    var position = $('#divParent').position(); 
    position.left += (($('#divParent').width()/2) - ($('#preloader').width()/2)); 
    position.top += (($('#divParent').height()/2) - ($('#preloader').height()/2)); 
    $('#preloader').css(position).show(); 
    $('#preloader').show(); 
}).ajaxStop(function() { 
    $('#preloader').hide(); 
}); 

Kann jemand helfen zu erklären, was hier vor sich geht?

Answer 1

Es war ein langer Weg, aber nach vielen Stunden des Experimentierens kam ich mit diesem Code auf:

$("#searchInput").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: '@Url.Action("GetKeywords", "Home")', 
      dataType: "json", 
      data: { 
       SearchTerm: request.term 
      }, 
      success: function (data) { 
       var parsed = JSON.parse(data); 
       var newArray = new Array(parsed.length); 
       var i = 0; 

       parsed.forEach(function (entry) { 
        var newObject = { 
         label: entry.kwrdKeyWord 
        }; 
        newArray[i] = newObject; 
        i++; 
       }); 

       response(newArray); 
      }, 
      error: function (message) { 
       response([]); 
      } 
     }); 
    }, 
    minLength: 2 
}); 

Diese gut zu funktionieren scheint. Die Wahrheit ist, dass meine Schlüsselwörter einzigartig sind, also kann ich ohne die ID sowieso leben.

Answer 2

eine kleine Hilfe, die nützlich sein können:

wenn Sie json verwenden, könnte es sein, dass die „json Objekt“ nicht analysiert wird, oder haben Sie die Variable mit anderen Tings überschrieben (wie das, was Das habe ich kürzlich dumm gemacht).

für das erste Problem, stellen Sie sicher, dass Ihr Server "application/json" MIME-Typ, sonst Verwendung Header wissen (für PHP)

Ich meine, in PHP, verwenden Sie diese vor allem:

header("Content-type: application/json"); 

Answer 3

hier, wie Sie die Funktion für die Quelleigenschaft verwenden

source:function(request,response) { 
    var url = "your url"; 
    var postdata = "your data"; // normally you might use request.term to get the current user input 
    $.ajax({url:url,data:postdata,success:function(responsedata){ 
     response($.parseJSON(responsedata)) 
    }}); 
} 

die Antwortfunktion akzeptiert Array von JSON-Objekte

Answer 4

anstelle des Schreibens ersetzen data.keywords mit JSON.parse(data) an dieser Linie: response($.map(data.keywords, function (item) {.

BR, Hazem