Scriptaculous Ajax.Autocompleter дополнительные функции в LI
Я использую класс Ajax.Autocompleter из библиотеки Prototype / Scriptaculous, который вызывает ASP.NET WebHandler, который создает неупорядоченный список с элементами списка, содержащими предложения.
Сейчас я работаю над страницей, на которой вы можете добавлять предложения в таблицу «стоп-слов», что означает, что если они встречаются в таблице, они больше не будут предлагаться.
Я помещаю кнопку внутри элементов LI, и когда вы нажимаете на нее, она должна выполнять запрос ajax к странице, которая затем добавляет слово в таблицу. Это работает. Но затем я хочу, чтобы предложения обновлялись мгновенно, чтобы предложения появлялись без слова, только что добавленного в таблицу. Предпочтительно выбранное слово является словом, следующим или перед словом, по которому щелкнули ранее.
Как мне это сделать? Вместо этого теперь происходит то, что LI, на которую вы нажали кнопку, становится выбранным словом, и предложения исчезают.
Пункты списка выглядят так:
<li>{0}
<img onclick=\"deleteWord('{0}');\" src=\"delete.gif\"/>
</li>
Где {0} представляет предлагаемое слово. Функция JavaScript deleteWord(w) вызывает веб-обработчик, который может добавить слово в таблицу «стоп-слов».
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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);"
Спасибо, попробую завтра, когда вернусь на работу.