Question

我正在使用Prototype / Scriptaculous库中的Ajax.Autocompleter类，它调用ASP.NET WebHandler，它创建一个包含建议的列表项的无序列表。

现在我正在开发一个页面，您可以在其中向“停用词”表添加建议，这意味着如果它们出现在表中，则不再建议它们。

我在LI元素中放了一个按钮，当你点击它时，它应该对页面执行ajax请求，然后将该单词添加到表格中。这样可行。但后来我想立即刷新建议，以便在没有添加到表格中的单词的情况下显示建议。优选地，所选单词是下一个单词或在先前单击的单词之前。

我该怎么做？现在发生的是，你点击按钮的LI将成为选定的单词并且建议消失。

列表项目如下所示：

<li>{0}
 <img onclick=\"deleteWord('{0}');\" src=\"delete.gif\"/>
</li>

{0}表示建议的字词。 JavaScript函数deleteWord(w)可以调用webhandler，它可以将单词添加到“停用词”表中。

Answer 1

Scriptaculous Autocompleter监视'li'上的onclick事件。当你将图像粘贴在'li'中时，'img'和'li'都会得到click事件，如图所示。这就是为什么Autocompleter在点击按钮时正常做的事情：

<ul>
  <li onclick="alert('li');">
    <img onclick="alert('image')" src="blah.gif"/>
  </li>
</ul>

我尝试的是让你的'onclick'设置某种状态变量，告诉你已经点击了删除。然后，override 'updateElement' in the Autocompleter如果设置了状态则不执行任何操作。另一种方法是将整个Autocompleter子类化并覆盖'onClick'。这将使列表在单击图像时不会消失。

要使列表实时更新，请在图像的“onclick”中删除DOM中列表中的“li”。就像这样概念性地说：

img onclick="deleteWord('blah');setStateVariable();this.parentNode.parentNode.removeChild(this.parentNode);"

Scriptaculous Ajax.Autocompleter LI中的额外功能

1 个答案: