Scriptaculous Autocomplete在Firefox中不起作用

Question

我正在开发一个项目，该项目使用Scriptaculous自动完成程序实现自动完成文本字段。在小于10的Internet Explorer版本中，系统工作正常，但自版本10以及Firefox或Chrome等其他浏览器中，自动完成功能有缺陷。我已经用原型1.7将Scriptaculous更新为1.9，但没有任何改变。

<label for="possibleClient">Verfügbare Klienten</label><br>
            <input type="text" id="possibleClient" class="fill intellisense"><div id="possibleClientUpdate" class="auto-complete"></div>

            <script type="text/javascript" language="javascript" charset="utf-8">
            // <![CDATA[

            function updateClientList(input,listitem) {

                var nodes = document.getElementsByClassName('informal', listitem) || [];
                if(nodes.length>0) label = Element.collectTextNodes(nodes[0], listitem);
                addToList("chosenClients",input.value,label);
                input.value="";
            }

            var ac = new Ajax.Autocompleter('possibleClient','possibleClientUpdate','/data/clients.php',{paramName: 'search',minChars:1, parameters:'projektIDs=<?php echo $projektID ?>&searchnName=true', select:'selectme', afterUpdateElement: updateClientList});
            // ]]>
            </script>               

我什么都不知道。

[UPDATE]

嗨坦克获得所有快速答案。我有缺陷是什么意思。我正在更新旧系统，以便为任何浏览器做好准备。缺陷意味着自动完成doesent工作。如果我在新浏览器中没有任何内容输入内容。当您激活兼容模式时，它在ie 10中工作。

系统没有使用json文件。 /data/clients.php返回

<ul><li></li></ul> 

文字段落。

e.g：

<ul><li><span class='informal'>Aicher Jasmin</span> (<span class='selectme'>65</span>)</li><li><span class='informal'>Bader Jacqueline Bernice</span> (<span class='selectme'>77</span>)</li><li><span class='informal'>Freisslich Claudia</span> (<span class='selectme'>78</span>)</li><li><span class='informal'>Goller Sascha</span> (<span class='selectme'>64</span>)</li><li><span class='informal'>Hebein Ilse</span> (<span class='selectme'>75</span>)</li><li><span class='informal'>Hohenwarter Berndt</span> (<span class='selectme'>60</span>)</li><li><span class='informal'>Kanz Bernhard</span> (<span class='selectme'>69</span>)</li><li><span class='informal'>Kohlmaier Angelika</span> (<span class='selectme'>68</span>)</li><li><span class='informal'>Konic Isabella</span> (<span class='selectme'>71</span>)</li><li><span class='informal'>Kosche Karl-Heinz</span> (<span class='selectme'>63</span>)</li><li><span class='informal'>Kreilitsch Jutta</span> (<span class='selectme'>70</span>)</li><li><span class='informal'>Kribitsch Bernhard</span> (<span class='selectme'>61</span>)</li><li><span class='informal'>Lackner Ermelinde</span> (<span class='selectme'>79</span>)</li><li><span class='informal'>M&ouml;sslacher Wolfgang</span> (<span class='selectme'>67</span>)</li><li><span class='informal'>M&uuml;ller Hans</span> (<span class='selectme'>54</span>)</li></ul>

我也不认为数据源是问题，因为它适用于旧浏览器。

如果我在firefox中启动开发者控制台，并输入：

我看到该程序被调用，并且脚本正在从[07：35：47.367] POST https://myserver.at/data/clients.php [HTTP / 1.1 200 OK 45ms]

中获取数据

但我没有看到带有自动填充建议的下拉列表。 这可能是一个问题吗？ 这是自动完成的css文件：

div.auto-complete {
  position:absolute;
  width:250px;
  background-color:white;
  border:1px solid #888;
  margin:1px 1px 0 1px;
  padding:0px;
}
div.auto-complete ul {
  list-style-type: none;
  margin:0px;
  padding:0px;
}
div.auto-complete ul li.selected { background-color: #ffb;}
div.auto-complete ul li {
  list-style-type: none;
  display:block;
  margin:0;
  padding:2px;
  height:22px;
  cursor:pointer;
}

Answer 1

有一件事可以解释为什么它可以在旧浏览器中运行但不是更新的是你的JSON无效：

var b = eval("[{nooo:'json0'},{nooo:'json1'}]"); //works
var b = JSON.parse("[{nooo:'json0'},{nooo:'json1'}]")// doesn't
              // because the string isn't valid json
var b = JSON.parse('[{"nooo":"json0"},{"nooo":"json1"}]');//works, valid JSON string

要解决此问题，您应该让PHP返回有效的JSON。

在安装了Firebug pligin的FireFox中，您可以右键单击文本框并选择“使用firebug检查元素”如果firebug窗口停靠，您应该看到元素和元素下方是“下拉”结果。

当您输入内容并且xhr请求完成时，结果应该有一个UL元素，当我在http://www.ajaxdaddy.com/scriptaculous-autocomplete.html

上使用它时，请参见下图

我上面提到的网址是否有用（它适用于Firefox但使用1.7）？

以下显示结果：

Answer 2

嗨坦克获得所有快速答案。我有缺陷是什么意思。我正在更新旧系统，以便为任何浏览器做好准备。缺陷意味着自动完成doesent工作。如果我在新浏览器中没有任何内容输入内容。当您激活兼容模式时，它在ie 10中工作。

系统没有使用json文件。 /data/clients.php返回

<ul><li></li></ul> 

文字段落。

e.g：

<ul><li><span class='informal'>Aicher Jasmin</span> (<span class='selectme'>65</span>)</li><li><span class='informal'>Bader Jacqueline Bernice</span> (<span class='selectme'>77</span>)</li><li><span class='informal'>Freisslich Claudia</span> (<span class='selectme'>78</span>)</li><li><span class='informal'>Goller Sascha</span> (<span class='selectme'>64</span>)</li><li><span class='informal'>Hebein Ilse</span> (<span class='selectme'>75</span>)</li><li><span class='informal'>Hohenwarter Berndt</span> (<span class='selectme'>60</span>)</li><li><span class='informal'>Kanz Bernhard</span> (<span class='selectme'>69</span>)</li><li><span class='informal'>Kohlmaier Angelika</span> (<span class='selectme'>68</span>)</li><li><span class='informal'>Konic Isabella</span> (<span class='selectme'>71</span>)</li><li><span class='informal'>Kosche Karl-Heinz</span> (<span class='selectme'>63</span>)</li><li><span class='informal'>Kreilitsch Jutta</span> (<span class='selectme'>70</span>)</li><li><span class='informal'>Kribitsch Bernhard</span> (<span class='selectme'>61</span>)</li><li><span class='informal'>Lackner Ermelinde</span> (<span class='selectme'>79</span>)</li><li><span class='informal'>M&ouml;sslacher Wolfgang</span> (<span class='selectme'>67</span>)</li><li><span class='informal'>M&uuml;ller Hans</span> (<span class='selectme'>54</span>)</li></ul>

我也不认为数据源是问题，因为它适用于旧浏览器。

如果我在firefox中启动开发者控制台，并输入：

我看到该程序被调用，并且脚本正在从[07：35：47.367] POST https://myserver.at/data/clients.php [HTTP / 1.1 200 OK 45ms]

中获取数据

但我没有看到带有自动填充建议的下拉列表。 这可能是一个问题吗？ 这是自动完成的css文件：

div.auto-complete {
  position:absolute;
  width:250px;
  background-color:white;
  border:1px solid #888;
  margin:1px 1px 0 1px;
  padding:0px;
}
div.auto-complete ul {
  list-style-type: none;
  margin:0px;
  padding:0px;
}
div.auto-complete ul li.selected { background-color: #ffb;}
div.auto-complete ul li {
  list-style-type: none;
  display:block;
  margin:0;
  padding:2px;
  height:22px;
  cursor:pointer;
}

Answer 3

是的，一切都像您说的那样，以及示例链接。但是，当我调试元素时，div css道具是display：none，它们不会改变。他添加了元素，但没有显示它们。

    <div id="possibleClientUpdate" style="display: none;">
<ul>...
</div>

如何解决此问题？