IE7上的jquery.ui.autocomplete.js问题
这是代码。 IE7在第39行上喷出“’active.0’为空或不是对象”错误,即:
input.trigger("activate.autocomplete", [$.data(active[0], "originalObject")]); $("body").trigger("off.autocomplete");
在Firefox / Chrome / Opera中完美运行。 有任何想法吗? 非常感谢,非常感谢。
/* jQuery Autocomplete * Version 1.0 * Written by Yehuda Katz (wycats@gmail.com) and Rein Henrichs (reinh@reinh.com) * @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 "" + opt.insertText(str) + " "; }, insertText: function(str) { return str; }, match: function(typed) { return this.match(new RegExp(typed)); }, wrapper: "
" }, 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);
查看:
它是jquery.ui.autocomplete.js的一个版本,修复了大部分IE 7问题。 我发现了一些我在底部列出的问题以及如何修复它们。
这是我的代码首先使用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 "" + row.studentname + "
" + "ID: " + row.studentidnumber + ", " + " Grade: " + row.studentgradenumber; }, formatResult: function(row, i, max){ return row.studentidnumber; } });
});
这是PHP文件中的代码。 它打印带有数据的JSON对象。
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); }
打印的JSON对象是:
[{"studentname":"Joe Schmo","studentidnumber":"123456","studentgradenumber":"11th"}]
所以row.studentname返回Joe Schmo。 其中row是函数中变量的名称,studentname是JSON对象中键的名称。
干杯!
我有自动完成jquery ui版本1.8.9和IE7的问题。 我现在使用1.8.16,它的工作原理。