Problème avec jquery.ui.autocomplete.js sur IE7

Voici le code. IE7 renverse une erreur "'active.0' est nulle ou pas un objet" à la ligne 39, qui est:

input.trigger("activate.autocomplete", [$.data(active[0], "originalObject")]); $("body").trigger("off.autocomplete");

Fonctionne parfaitement dans Firefox / Chrome / Opera. Des idées? Merci beaucoup et beaucoup apprécié.

 /* jQuery Autocomplete * Version 1.0 * Written by Yehuda Katz ([email protected]) and Rein Henrichs ([email protected]) * @requires jQuery v1.2, jQuery dimensions plugin * * Copyright 2007 Yehuda Katz, Rein Henrichs * Dual licensed under the MIT and GPL licenses: * hxxp://www.opensource.org/licenses/mit-license.php * hxxp://www.gnu.org/licenses/gpl.html * */ /* * @description Form autocomplete plugin using preloaded or Ajax JSON data source * * @example $('input#user-name').autocomplete({list: ["quentin", "adam", "admin"]}) * @desc Simple autocomplete with basic JSON data source * * @example $('input#user-name').autocomplete({ajax: "/usernames.js"}) * @desc Simple autocomplete with Ajax loaded JSON data source * */ (function($) { $.ui = $.ui || {}; $.ui.autocomplete = $.ui.autocomplete || {}; var active; $.fn.autocompleteMode = function(container, input, size, opt) { var original = input.val(); var selected = -1; var self = this; $.data(document.body, "autocompleteMode", true); $("body").one("cancel.autocomplete", function() { input.trigger("cancel.autocomplete"); $("body").trigger("off.autocomplete"); input.val(original); }); $("body").one("activate.autocomplete", function() { input.trigger("activate.autocomplete", [$.data(active[0], "originalObject")]); $("body").trigger("off.autocomplete"); }); $("body").one("off.autocomplete", function(e, reset) { container.remove(); $.data(document.body, "autocompleteMode", false); input.unbind("keydown.autocomplete"); $("body").add(window).unbind("click.autocomplete").unbind("cancel.autocomplete").unbind("activate.autocomplete"); }); // If a click bubbles all the way up to the window, close the autocomplete $(window).bind("click.autocomplete", function() { $("body").trigger("cancel.autocomplete"); }); var select = function() { active = $("> *", container).removeClass("active").slice(selected, selected + 1).addClass("active"); input.trigger("itemSelected.autocomplete", [$.data(active[0], "originalObject")]); input.val(opt.insertText($.data(active[0], "originalObject"))); }; container.mouseover(function(e) { // If you hover over the container, but not its children, return if(e.target == container[0]) return; // Set the selected item to the item hovered over and make it active selected = $("> *", container).index($(e.target).is('li') ? $(e.target)[0] : $(e.target).parents('li')[0]); select(); }).bind("click.autocomplete", function(e) { $("body").trigger("activate.autocomplete"); $.data(document.body, "suppressKey", false); }); input .bind("keydown.autocomplete", function(e) { if(e.which == 27) { $("body").trigger("cancel.autocomplete"); } else if(e.which == 13) { $("body").trigger("activate.autocomplete"); } else if(e.which == 40 || e.which == 9 || e.which == 38) { switch(e.which) { case 40: case 9: selected = selected >= size - 1 ? 0 : selected + 1; break; case 38: selected = selected <= 0 ? size - 1 : selected - 1; break; default: break; } select(); } else { return true; } $.data(document.body, "suppressKey", true); }); }; $.fn.autocomplete = function(opt) { opt = $.extend({}, { timeout: 1000, getList: function(input) { input.trigger("updateList", [opt.list]); }, template: function(str) { return "<li>" + opt.insertText(str) + "</li>"; }, insertText: function(str) { return str; }, match: function(typed) { return this.match(new RegExp(typed)); }, wrapper: "<ul class='jq-ui-autocomplete'></ul>" }, opt); if($.ui.autocomplete.ext) { for(var ext in $.ui.autocomplete.ext) { if(opt[ext]) { opt = $.extend(opt, $.ui.autocomplete.ext[ext](opt)); delete opt[ext]; } } } return this.each(function() { $(this) .keypress(function(e) { var typingTimeout = $.data(this, "typingTimeout"); if(typingTimeout) window.clearInterval(typingTimeout); if($.data(document.body, "suppressKey")) return $.data(document.body, "suppressKey", false); else if($.data(document.body, "autocompleteMode") && e.charCode < 32 && e.keyCode != 8 && e.keyCode != 46) return false; else { $.data(this, "typingTimeout", window.setTimeout(function() { $(e.target).trigger("autocomplete"); }, opt.timeout)); } }) .bind("autocomplete", function() { var self = $(this); self.one("updateList", function(e, list) { list = $(list) .filter(function() { return opt.match.call(this.toLowerCase(), self.val()); }) .map(function() { var node = $(opt.template(this))[0]; $.data(node, "originalObject", this); return node; }); $("body").trigger("off.autocomplete"); if(!list.length) return false; var container = list.wrapAll(opt.wrapper).parents(":last").children(); var offset = self.offset(); opt.container = container .css({top: offset.top + self.outerHeight(), left: offset.left, width: self.width()}) .appendTo("body"); $("body").autocompleteMode(container, self, list.length, opt); }); opt.getList(self); }); }); }; })(jQuery);

Check-out:

http://github.com/istruble/jquery-autocomplete/commit/bdc926bd2c18c3ebab4e31463a8ae899fd761316#diff-1

C'est une version de jquery.ui.autocomplete.js avec la plupart des problèmes IE 7 corrigés. J'ai trouvé quelques autres problèmes que j'ai énumérés au bas, ainsi que la façon de les réparer.

Voici mon code qui fonctionne en premier javascript:

 $(".student_search").autocomplete("student_search.php", { minChars: 2, cacheLength: 20, matchContains: true, highlightItem: true, parse: function(data) { return $.map(eval(data), function(row) { return { data: row, value: row.studentname, //value being searched for result: row.studentidnumber //value in text input } }); }, formatItem: function(row, i, max, term) { return "<span style='font-size: 110%;'>" + row.studentname + "</span><br/>" + "ID: " + row.studentidnumber + ", " + " Grade: " + row.studentgradenumber; }, formatResult: function(row, i, max){ return row.studentidnumber; } });

});

Voici le code dans le fichier PHP. Il imprime un objet JSON avec les données.

 if(isset($_GET['q'])){ require_once("php/mysql.connect.php"); $request = strtolower($_GET['q']); $query = mysql_query("SELECT CONCAT(studentfname, ' ', studentlname, '') AS studentname, studentidnumber, CONCAT(studentgradenumber, 'th') AS studentgradenumber FROM studentinfo WHERE studentlname LIKE '%".$request."%' OR studentfname LIKE '%".$request."%' OR studentidnumber LIKE '%".$request."%'") or die(mysql_error()); $results = array(); $i = 0; while($row = mysql_fetch_assoc($query)) //fetch each result using the column name as the array key { foreach($row as $column=>$val) //loop through each column { $results[$i][$column] = $val; //build array using incremental row # and column name } $i++; //increase the row counter } print json_encode($results); }

L'objet JSON qui est imprimé est:

 [{"studentname":"Joe Schmo","studentidnumber":"123456","studentgradenumber":"11th"}]

Alors row.studentname renvoie Joe Schmo. La ligne where est le nom de la variable dans la fonction et studentname est le nom de la clé de l'objet JSON.

À votre santé!

J'ai eu des problèmes avec l'autocomplétion de jquery ui version 1.8.9 et IE7. J'utilise 1.8.16 maintenant et ça marche.