javascript - LI 中的 Scriptaculous Ajax.Autocompleter 额外功能

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，该 Webhandler 可以将单词添加到“停用词”表中。

Answer 1

Scriptaculous 自动完成器监视“li”上的 onclick 事件。当您将图像粘贴到“li”内时，“img”和“li”都会获得点击事件，如下所示。这就是为什么自动完成器在单击按钮时只做正常的事情:

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

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

要实时更新列表，请在图像的“onclick”中也从 DOM 的列表中删除“li”。从概念上讲是这样的:

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