0

我正在开发一个使用 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>

我没有任何想法。

[更新]

嗨坦克所有的快速答案。有缺陷是什么意思。我正在更新一个旧系统，以便为任何浏览器做好准备。有缺陷意味着自动完成功能不起作用。如果我在较新的浏览器中输入任何内容，则不会发生任何事情。当您激活兼容模式时，它可以在 ie 10 中使用。

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

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

文字段落。

例如：

<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] 获取数据

但我没有看到带有自动完成建议的下拉 div。它可能是一个 css Probleme 吗？这是自动完成的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;
}
4

3 回答 3

0

想到为什么它可以在较旧的浏览器中工作但不能在较新的浏览器中工作的一件事是您的 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 插件的 FireFox 中，您是否可以右键单击文本框并选择“使用 firebug 检查元素” 如果 firebug 窗口停靠，您应该会看到元素，元素下方是“下拉”结果。

当您键入内容并且 xhr 请求完成时，结果应该有一个 UL 元素，当我在http://www.ajaxdaddy.com/scriptaculous-autocomplete.html上使用它时，请参见下图

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

空下拉列表，UL 不包含任何元素并且 div 的显示设置为 none

以下显示结果：

显示下拉菜单，UL 有子级，显示未设置为无

于 2013-05-14T10:47:03.017 回答
0

嗨坦克所有的快速答案。有缺陷是什么意思。我正在更新一个旧系统，以便为任何浏览器做好准备。有缺陷意味着自动完成功能不起作用。如果我在较新的浏览器中输入任何内容，则不会发生任何事情。当您激活兼容模式时，它可以在 ie 10 中使用。

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

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

文字段落。

例如：

<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] 获取数据

但我没有看到带有自动完成建议的下拉 div。它可能是一个 css Probleme 吗？这是自动完成的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;
}
于 2013-05-15T05:39:48.977 回答
0

是的，一切都像你说的那样工作，还有示例链接。但是当我调试元素时，div css 道具是 display:none 并且它们不会改变。他添加了元素，但没有显示它们。

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

我该如何解决这个问题？

于 2013-05-16T06:40:40.100 回答