Дополнительная функциональность Scriptaculous Ajax.Autocompleter в LI

Question

Я использую класс Ajax.Autocompleter из библиотеки Prototype/Scriptaculous, который вызывает ASP.NET WebHandler, который создает неупорядоченный список с элементами списка, содержащими предложения.

Сейчас я работаю над страницей, на которой вы можете добавлять предложения в таблицу «стоп-слов», а это означает, что если они встречаются в таблице, они больше не будут предлагаться.

Я помещаю кнопку внутри элементов LI, и когда вы нажимаете на нее, она должна выполнить ajax-запрос на страницу, которая затем добавит слово в таблицу.Это работает.Но затем я хочу, чтобы предложения мгновенно обновлялись, чтобы предложения появлялись без только что добавленного в таблицу слова.Предпочтительно выбранное слово является словом, следующим или перед словом, по которому щелкнули ранее.

Как мне это сделать?Вместо этого теперь происходит то, что LI, кнопку которого вы нажали, становится выбранным словом, и предложения исчезают.

Элементы списка выглядят следующим образом:

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

Где {0} представляет предложенное слово.Функция JavaScript deleteWord(w) получает вызов веб-обработчика, который может добавить слово в таблицу «стоп-слов».

Answer 1

Scriptaculous Autocompleter отслеживает событие onclick на «li».Когда вы вставляете изображение в «li», и «img», и «li» получат событие щелчка, как это показано.Вот почему автозаполнение просто делает свои обычные действия при нажатии кнопки:

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

Я бы попробовал, чтобы ваш «onclick» установил какую-то переменную состояния, которая сообщает вам, что было нажато «Удалить».Затем, переопределить «updateElement» в автозаполнении ничего не делать, если состояние установлено.Альтернативой является создание подкласса всего автозаполнения и переопределение onClick.Благодаря этому список не исчезнет при нажатии на ваше изображение.

Чтобы список обновлялся в режиме реального времени, в «onclick» вашего изображения также удалите «li» из списка в DOM.Концептуально вот так:

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