Scriptaculous Ajax.Autocompleter дополнительная функциональность в LI - PullRequest
Новая
       23

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

1 голос
/ 13 сентября 2008

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

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

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

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

Элементы списка выглядят так: 

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

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

1 Ответ

0 голосов
/ 14 сентября 2008

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

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

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

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

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