jQuery: الإكمال التلقائي مع مصدر XML عن بُعد

Question

أحاول تنفيذ مربع نص الإكمال التلقائي الذي يتم إنشاء قيمه بواسطة برنامج نصي عن بُعد لإرجاع محتويات XML. أنا أستخدم jQuery-1.4.3 والعناصر الإضافية التلقائية من jQuery-ui-1.8.5.

لقد درست الصفحة التجريبية الإكمال التلقائي ل تم تحليل بيانات XML مرة واحدة على سبيل المثال ، وأحاول تنفيذ التعليقات:

يجب أن يكون هذا أيضًا بمثابة مرجع حول كيفية تحليل بيانات بيانات XML عن بُعد - فإن التحليل سيحدث فقط لكل طلب داخل المصدر.

كاختبار ، أحاول الحصول على هذا العمل مع عرض XML الموفر. يشير التعليق أعلاه إلى أن خاصية "مصدر" الإكمال التلقائي يجب استبدالها بمكالمة AJAX. ومع ذلك ، عندما أقوم بتعديل هذا في الوظيفة المقدمة في الصفحة التجريبية, ، لا أحصل على أي نتائج مع اتباع وظيفة الإكمال التلقائي:

$( "#birds" ).autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "london.xml",
      dataType: "xml",
      success: function( xmlResponse ) {
        var data = $( "geoname", xmlResponse ).map(function() {
//alert($('name', this).text());
          return {
            value: $( "name", this ).text() + ", " +
                   ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
            id: $( "geonameId", this ).text()
          };
        }).get();
      }
    })
  },
  minLength: 0,
  select: function( event, ui ) {
    log( ui.item ?
         "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
         "Nothing selected, input was " + this.value );
  }
});

ومع ذلك ، يوضح التعليق على رسالة Debug المنبثقة البسيطة أن مكالمة AJAX تمكن من استرداد القيم المستخدمة في بناء البيانات. أين خطأي؟

أي مساعدة موضع تقدير كبير!

أطيب التحيات،

رون فان دن براندن

Answer 1

موافق،

لقد وجدت الحل ، ويمكنني أن أجيب بكل سرور.

في محاولتي الأصلية ، أعلنت "بيانات" المتغير في رد الاتصال الناجح لوظيفة Ajax ، لكنني لم تفعل أي شيء بها. الحل بسيط بما فيه الكفاية: أضف دالة استجابة () من شأنها إرجاع متغير البيانات إذا نجحت مكالمة AJAX. سأضيف الوظيفة المصححة الكاملة (على الرغم من أن التغيير الوحيد هو على السطر 14): كود نسخ

$( "#birds" ).autocomplete({
   source: function(request, response) {
     $.ajax({
       url: "london.xml",
       dataType: "xml",
       success: function( xmlResponse ) {
         var data = $( "geoname", xmlResponse ).map(function() {
           return {
             value: $( "name", this ).text() + ", " +
                     ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
             id: $( "geonameId", this ).text()
           };
         });
       response(data);
       }
     })
   },
   minLength: 0,
   select: function( event, ui ) {
     log( ui.item ?
       "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
       "Nothing selected, input was " + this.value );
   }
 });

بالطبع ، في هذه الحالة ، يمكن بناء الاستجابة مباشرة ، دون إعلان متغير البيانات أولاً: كود نسخ

     $.ajax({
       url: "london.xml",
       dataType: "xml",
       success: function( xmlResponse ) {
         response($( "geoname", xmlResponse ).map(function() {
           return {
             value: $( "name", this ).text() + ", " +
                     ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
             id: $( "geonameId", this ).text()
           };
         }));
       }
     })
   }

(ملاحظة: تعمل مقتطفات الوظائف هذه عند إدراجها في عرض إكمال تلقائي "XML" عن بُعد)

فوز! الآن على فعل شيء مفيد مع هذا.

رون