【问题标题】:Script.aculo.us Autocompleter problem in IEIE 中的 Script.aculo.us 自动完成程序问题
【发布时间】:2010-09-11 15:22:03
【问题描述】:

我正在努力解决 IE 中的 Script.aculo.us 自动完成器控件的问题(我在 IE6 和 7 中尝试过)。页面加载后,在文本框中输入第一个字符时建议无法显示。在最初的失败之后,控件可以正常工作。

我已验证服务器返回的建议数据正确;该问题似乎与建议元素的定位有关,因为页面上其他相对定位的元素在您希望出现建议的那一刻移出位置。

有没有人听说过这样的问题或对如何解决它有任何建议?

编辑:作为对 Chris 的回应,我已将 partialChars 参数设置为 1,并且该控件可在我尝试过的所有其他浏览器中工作,它们是 Firefox、Safari、Opera 和 Chrome 的最新版本。我可能应该首先说清楚。谢谢。

【问题讨论】:

  • 这也是我的问题,谢谢!为所有人和一切点赞!现在我要去打一些来之不易的乒乓球了。

标签: internet-explorer prototypejs scriptaculous autocomplete


【解决方案1】:

我确实遇到了同样的问题。该问题仅出现在 IE 中(也在 8.0 beta 中)

我尝试过的 Firefox 和 Chrome 都没有任何问题。

根据其他人的说法,这是由于 HTML 文件中的 DOCTYPE 声明。在这里查看:http://prototype.lighthouseapp.com/projects/8887/tickets/32-ajax-autocomplete-in-ie-with-doctype

该错误还在 ruby​​ 开发者委员会获得了一张票:http://dev.rubyonrails.org/ticket/11051

两个链接都有解决问题的方法。

希望该错误将在下一个版本的原型/脚本中修复 :)

【讨论】:

    【解决方案2】:

    非常感谢您的破解。我自己使用过它,但对其进行了修改,因此仅在通过执行以下操作使用 Ajax.Autocompleter 时才调用它。

    function positionAuto(element, entry) {
        setTimeout( function() {
          Element.clonePosition('choices_div', 'text_element', {
          'setWidth': false,
          'setHeight': false,
          'offsetTop': $('text_element').offsetHeight
        } );
      }, 300);
      return entry;
    }
    
    new Ajax.Autocompleter('text_element', 'choices_div', [url to web service], {
      paramName: 'fulltext',
      minChars: 2,
      callback: positionAuto, // See above
      [etc...]
    

    由于回调是在发出真正请求之前调用的,因此将 DIV 定位在那个时刻是最有意义的。并且将确保即使调整窗口大小或滚动窗口,DIV 也能正确定位。令人抓狂的是,为了让它始终如一地工作,我不得不将它包装在“setTimeout()”中。没有对不同的计时设置进行太多试验,但如果有一个较低的超时阈值有效,我想知道。

    在 IE 8 和 7 上测试并且运行良好。并且也适用于其他真正的浏览器。希望这可以避免一些编码人员在处理这个问题时感到头疼。

    【讨论】:

      【解决方案3】:

      您的问题只是在 IE 中,还是在所有浏览器中?忽略第一个字符实际上是自动完成器的默认设置。在 controls.js 中,有一个名为 Autocompleter.Local 的类,它有一个名为 partialChars 的字段,默认为 2。该字段的文档说:

      // - partialChars - 触发前输入多少个字符
      // 部分匹配(与 minChars 不同,它定义了
      // 匹配需要多少个字符
      // 完全没有)。默认为 2。

      【讨论】:

        【解决方案4】:

        在 IE8/IE9 中为这个问题苦苦挣扎后,我最终使用了 CSS hack。这里的方法是在绝对定位的容器内强制相对定位。额外的容器是必要的,以便将选择浮动到其他元素上。

        div.acwrap {
          position: absolute;
          height: 40px;
        }
        
        div.autocomplete {
          position: relative !important;
          top: -5px  !important;
          left: 0px !important;
          width:250px;
          margin:0;
          padding:0;
        }
        

        在我的 HTML 代码中,我使用了如下类:

        <div class="acwrap">
         <div id="autocomplete_choices" class="autocomplete">
         </div>
        </div>
        

        这个想法源于这里:Scriptaculous / Prototype IE 8 Autocomplete disappearing problem

        【讨论】:

          【解决方案5】:

          我仍然不知道究竟是什么导致了这个问题,但我设法想出了一个技巧来解决它。这个想法是在页面加载时执行通常会导致第一个字符输入失败的处理,以使其不碍事:

          new Ajax.Autocompleter(textInputId, suggestionsHolderId, suggestionsUrl, params);
          
          //Hack
          Event.observe(window, 'load', function()
          {
              try
              {
                  Position.clone($(textInputId), $(suggestionsHolderId),
                      { setHeight: false, offsetTop: $(textInputId).offsetHeight});
              }
              catch(e){}
          });
          

          【讨论】:

            【解决方案6】:

            这是一个已知的错误,带有一个可以工作但尚未包含在内的补丁。你可以在这里阅读更多信息:https://prototype.lighthouseapp.com/projects/8886-prototype/tickets/618-getoffsetparent-returns-body-for-new-hidden-elements-in-ie8-final#ticket-618-9

            【讨论】:

              猜你喜欢
              • 2010-11-09
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2012-06-12
              • 2011-05-29
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多