Scriptaculous Autocompleter將無法在Firefox中工作

Question

我正在使用Scriptaculous autocompleter實現自動完成文本字段的項目。在Internet Explorer少於10的版本中，系統工作正常，但從版本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開發人員控制檯，並鍵入的東西：

我看到該程序被調用並使得腳本是從歌廳中的數據[：35：07 47.367] POST https://myserver.at/data/clients.php [HTTP/1.1 200 OK 45ms]

但我沒有看到自動填充建議的下拉div。 這可能是一個CSS的問題？ 下面是自動完成的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窗口已停靠，您應該看到元素，下面的元素是「下拉」結果。

當你輸入的東西，然後XHR請求完成的結果應該有一個UL元素見下面當我使用它http://www.ajaxdaddy.com/scriptaculous-autocomplete.html

圖像請問我上述工作提到的URL（它爲我使用Firefox，但使用1.7）？

下面顯示的結果：

Answer 2

所有快速解答喜坦克。我的意思是有缺陷。我正在更新舊系統，以便爲任何瀏覽器做好準備。有缺陷意味着自動完成的工作。如果我在新瀏覽器中沒有任何內容輸入內容。當你激活兼容模式時，它在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開發人員控制檯，並鍵入的東西：

我看到該程序被調用並使得腳本是從歌廳中的數據[：35：07 47.367] POST https://myserver.at/data/clients.php [HTTP/1.1 200 OK 45ms]

但我沒有看到自動填充建議的下拉div。 這可能是一個CSS的問題？ 下面是自動完成的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

是一切工作像你說的，也是樣本連接。但是，當我調試元素的CSS CSS道具顯示：無，他們不改變。他添加了元素，但沒有顯示它們。

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

我該如何解決這個問題？