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} يمثل الكلمة المقترحة.وظيفة جافا سكريبت deleteWord(w) يجب عليه الاتصال بمعالج الويب الذي يمكنه إضافة الكلمة إلى جدول "إيقاف الكلمات".

Answer 1

يقوم برنامج الإكمال التلقائي Scriptaculous بمراقبة حدث عند النقر على "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);"