LI의 Scriptaculous Ajax.Autocompleter 추가 기능

Question

나는 제안이 포함된 목록 항목이 있는 순서가 지정되지 않은 목록을 생성하는 ASP.NET WebHandler를 호출하는 Prototype/Scriptaculous 라이브러리의 Ajax.Autocompleter 클래스를 사용하고 있습니다.

이제 저는 '불용 단어' 표에 제안을 추가할 수 있는 페이지 작업을 하고 있습니다. 즉, 해당 단어가 표에 나타나면 더 이상 제안되지 않습니다.

LI 요소 안에 버튼을 넣었고, 버튼을 클릭하면 페이지에 Ajax 요청을 수행한 다음 테이블에 단어를 추가해야 합니다.작동합니다.그러나 나는 제안이 즉시 새로 고쳐져서 테이블에 방금 추가된 단어 없이 제안이 나타나기를 원합니다.바람직하게는 선택된 단어는 이전에 클릭한 단어 다음 또는 앞의 단어입니다.

어떻게 해야 하나요?대신 이제 버튼을 클릭한 LI가 선택된 단어가 되고 제안 항목이 사라지는 일이 발생합니다.

목록 항목은 다음과 같습니다.

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

어디 {0} 추천 단어를 나타냅니다.자바스크립트 함수 deleteWord(w) '중지 단어' 테이블에 단어를 추가할 수 있는 웹 핸들러를 호출하게 됩니다.

Answer 1

Scriptaculous Autocompleter는 'li'에서 onclick 이벤트를 모니터링합니다.'li' 안에 이미지를 붙이면 'img'와 'li' 모두 클릭 이벤트를 받게 됩니다.이것이 바로 Autocompleter가 버튼을 클릭할 때 정상적인 작업을 수행하는 이유입니다.

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

내가 시도할 것은 'onclick'이 삭제가 클릭되었음을 알려주는 일종의 상태 변수를 설정하도록 하는 것입니다.그 다음에, 자동 완성기에서 'updateElement'를 재정의합니다. 상태가 설정되어 있으면 아무 것도 하지 않습니다.대안은 전체 Autocompleter를 하위 클래스로 분류하고 'onClick'을 재정의하는 것입니다.그러면 이미지를 클릭해도 목록이 사라지지 않습니다.

목록을 실시간으로 업데이트하려면 이미지의 'onclick'에서 DOM 목록에서도 'li'를 삭제하세요.개념적으로는 다음과 같습니다.

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