IE7上的jquery.ui.autocomplete.js問題

Question

這是代碼。 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 "<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);

Answer 1

查看：

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

它是jquery.ui.autocomplete.js的一個版本，修復了大部分IE 7問題。 我發現了一些我在底部列出的問題以及如何修復它們。

Answer 2

這是我的代碼首先運行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;
                }
        });

}）;

這是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對象中鍵的名稱。

干杯!

Answer 3

我有自動完成jquery ui版本1.8.9和IE7的問題。 我現在使用1.8.16，它的工作原理。