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) 可以调用网络处理程序，该处理程序可以将单词添加到“停用词”表中。

Answer 1

Scriptaculous Autocompleter 监视“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);"