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

现在，我正在一个页面上，我们可以在其中向"停用词"表添加建议，这意味着如果这些建议出现在表中，将不再建议它们。

我在LI元素内放置了一个按钮，当我们单击它时，它应该对页面进行ajax请求，然后将单词添加到表中。那个有效。但是，然后我希望立即刷新建议，以使建议出现而没有在表中添加单词。优选地，所选择的单词是在先前点击的单词之后或者之前的单词。

我该怎么做呢？现在发生的事情是，我们单击的按钮的LI成为所选单词，并且建议消失了。

列表项如下所示：

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

其中" {0}"代表建议的单词。 JavaScript函数deleteWord(w)可以调用网络处理程序，该处理程序可以将单词添加到"停用词"表中。

解决方案

回答

脚本式自动完成程序监视" li"上的onclick事件。当我们将图像粘贴到" li"中时，" img"和" li"都将获得click事件，这证明了这一点。这就是为什么单击按钮时Autocompleter只是做其正常的事情：

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

我要尝试的是让" onclick"设置某种状态变量，告诉我们已单击Delete。然后，如果设置了状态，则在自动完成程序中覆盖" updateElement"以不执行任何操作。一种替代方法是对整个自动完成程序进行子类化，并覆盖" onClick"。这将使列表在单击图像时不会消失。

要实时更新列表，请在图像的" onclick"中也从DOM中的列表中删除" li"。从概念上来说像这样：

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