Chosen: إحضار من مصدر بيانات بعيد

هذا أفضل قليلاً من jquery auto complete ، أليس كذلك؟ أرغب في رؤية مصادر البيانات البعيدة في النهاية (القدرة على توفير رد اتصال لنتائج البحث)

ثالث هذا الطلب. سيكون هذا مفيدًا جدًا لتكون لديك القدرة على تحديد مصدر بعيد تمامًا مثل ميزة الإكمال التلقائي jQuery UI.

أو ربما أفضل: تضمين مُختار في jQuery UI. :)

+1

بشكل أكثر تحديدًا ، فإن فكرة +1 الخاصة بي هي فكرة استخدام مصدر بيانات بعيد مع إدخال نص حر (على سبيل المثال ، استخدام مكالمات ajax للمساعدة في وضع العلامات)

عذرًا ، لم أكن واضحًا بما يكفي ، لكن تكامل "مصدر البيانات عن بُعد" هو ما قصدته في الأصل ، شكرًا لتوضيح ذلك. بالطبع ، هذا البرنامج المساعد أفضل بكثير من ميزة jQuery Auto Complete. كما علق daFish ، أود أن أرى هذا كجزء من jQuery UI نفسها.

+1 لدعم مصادر البيانات عن بعد

أنا لا أفهم. يتمحور الاختيار حول سهولة الاستخدام والجمال بشكل أفضل على عناصر SELECT ، وليس حول الإكمال التلقائي أو جلب البيانات عن بُعد. إذا كنت تريد بيانات عن بُعد ، فجمعها وضعها في de DOM قبل المكالمة المختارة ...

juanghurtado : إذا كان لدي مربع متعدد التحديد يحتوي على 300 ألف عنصر ، فلا يمكنني كتابته في لغة html بالكامل. يوفر Chosen واجهة مثالية للبحث والاختيار. هناك العديد من المكتبات الأخرى التي توفر هذه الوظيفة ، مثل [1] ، [2] وغيرها الكثير. من بين كل هؤلاء ، يعمل Chosen بشكل أفضل ، لكنه لا يدعم المجموعات الكبيرة جدًا - وهو ما سيضيفه دعم مصدر البيانات البعيد. أيضًا ، إذا كان Chosen يدعم هذا ، فذلك يعني الحاجة إلى الجلد والحفاظ على تحديث مكون إضافي واحد بدلاً من اثنين.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

حسنًا ، إذا كان لديك 300 ألف عنصر في عنصر SELECT الخاص بك ، (IMHO) فأنت تفعل شيئًا خاطئًا ... هناك العديد من الخيارات للتعامل مع هذه الواجهة بطريقة أفضل.

يمكن أن يقوم المختار بأشياء ... مثل سكاكين الجيش الحفيف ، يمكنه فعل الكثير من الأشياء (مصادر البيانات عن بُعد ، ربط الصور بالعناصر ، التصفية المخصصة ، استعلامات AJAX ...) والتوقف عن كونه الأداة المثالية لواحد فقط (واجهة أفضل مقابل SELECT التقليدي عناصر

10/08/2011 ، las 22:56 ، ivaynberg escribió:

juanghurtado : إذا كان لدي مربع متعدد التحديد يحتوي على 300 ألف عنصر ، فلا يمكنني كتابته في لغة html بالكامل. يوفر Chosen واجهة مثالية للبحث والاختيار. هناك العديد من المكتبات الأخرى التي توفر هذه الوظيفة ، مثل [1] ، [2] وغيرها الكثير. من بين كل هؤلاء ، يعمل Chosen بشكل أفضل ، لكنه لا يدعم المجموعات الكبيرة جدًا - وهو ما سيضيفه دعم مصدر البيانات البعيد. أيضًا ، إذا كان Chosen يدعم هذا ، فذلك يعني الحاجة إلى الجلد والحفاظ على تحديث مكون إضافي واحد بدلاً من اثنين.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

قم بالرد على هذا البريد الإلكتروني مباشرة أو قم بعرضه على GitHub:
https://github.com/harvesthq/chosen/issues/79#issuecomment -1776643

لا أستطيع المجادلة مع ذلك ...

أرغب في الحصول على بيانات عن بُعد عند البحث من المختار ، مثل المكون الإضافي للإكمال التلقائي jquery ، الرجاء مساعدتي

+1 للحصول على دعم للبيانات البعيدة.

تبدو أي واجهة مستخدم رائعة ، ولكن هناك بعض المشكلات ، مثل عدم دعم البيانات عن بُعد.

أعتقد أن هذا ممكن ولكن ليس بالسهولة التي قد يتصورها المرء. نظرًا لأن هذا هو جيثب ومصدر مفتوح ، فلنلقِ نظرة على بعض التعليمات البرمجية.

juanghurtado أعتقد أيضًا أنه يمكننا القيام بذلك دون تضخيم الوظائف الحالية ، فكل من jquery والنموذج الأولي يعطينا كل ما نحتاجه لمصادر البيانات البعيدة.

يبدو أن results_search () يتم تشغيله أثناء الضغط على المفاتيح - وهذا هو المكان الذي يمكنني فيه تجاوز السلوك الافتراضي المختار. أحتاج إلى البحث بشكل أعمق قليلاً ولكن يبدو أنه إذا كان بإمكاننا محاكاة winnow_results () وإضافة طريقة لإظهار سلوك التحميل (على سبيل المثال winnow_loading_results ()) ، فقد يعمل هذا بشكل جيد.

هناك وظيفة أخرى يجب النظر إليها وهي winnow_results_clear () ؛

الجزء الصعب هو معرفة كيفية دمج هذا بسلاسة في Chosen. هل يجب أن يكون في الخيارات؟ هل يجب أن تكون مجرد فئة فرعية؟ وهل هذا شيء سيسمح به المطورون الأساسيون في المشروع الرئيسي؟

في الواقع - يجب أن نغلق هذه المشكلة ، يتم إنجاز الكثير من العمل على الرقم 162 والذي يبدو أنه كل ما نريده.

فقط اعتقدت أنني سأضيف أن هذه الوظيفة في هذا العصر أمر لا بد منه وآمل حقًا أن يتم تنفيذها قريبًا. في كل الطرق الأخرى المختارة مثالية. :)

ماذا حدث هذا الجلب من مشكلة مصدر البيانات البعيد؟

حان الوقت لـ pfiller للانضمام إلى المحادثة على ما أعتقد.

+1 أحب أن أرى هذا

أقوم بتحميل القيم البعيدة مرة واحدة عند تقديم الصفحة ، لذا إذا لم أستطع تحديث أو جلب بيانات جديدة ، إذا كان بإمكاني على الأقل إضافة خيارات جديدة إلى التحديد ، فيمكنني الاحتفاظ بجانب العميل حتى يتم تحديث الصفحة. لذا +1 للجلب عن بعد و / أو +1 القدرة على إضافة خيارات جديدة. أتمنى أن يكون هذا منطقيًا ...

+1 لطلب الجلوكة

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

قام شخص ما بتنفيذه: https://github.com/meltingice/ajax-chosen

أنا لست خبيرًا في jQuery وفي الحقيقة لا أعرف شيئًا عنها. لذا أرجوك سامح طريقي الجاهل لشرح الأمور. لا يمكنني حقًا العثور على الكلمات المناسبة لوصف مشكلتي. لقد اتبعت للتو هذه التعليمات البسيطة: أضفت فصلًا ، وأدخل النص واستدعت الوظيفة. كل شيء يعمل بشكل رائع ، باستثناء الصفحة التي لم يكن بها مدخلات محددة. ولست متأكدًا من أن البيانات ستتم بمساعدة Ajax. كل ما يمكنني أن أفترضه هو أن النماذج يتم إنشاؤها من جدول قاعدة بيانات MySQL. حدد خيارات الإدخال من هناك. على الأقل بدا الأمر كما لو قمت بتحرير الصفحة. لذلك عندما أقوم بتحميل الصفحة ، أرى فقط فئة "chzn-select" في الإدخال المحدد الخاص بي مما يعني أن البرنامج النصي لا يعمل على الإطلاق. فهمت قراءة المشكلات ذات الصلة أنها بسبب مصدر البيانات البعيد ، لكنني لا أفهم كيفية إصلاحها. في الواقع أنا لا أفهم حقًا ما تتحدثون عنه هنا. لقد جربت Ajax الذي تم اختياره المقدم أعلاه دون نجاح وجربت "الاختراقات" الأخرى المذكورة هنا. هل يمكن لأي شخص أن يشرح بكلمات بسيطة هل من الممكن أن أفعل شيئًا في حالتي أم لا؟

أنا أستخدم jQuery 1.4.2 ، وقد جربته على نظامي التشغيل Mac OS و Windows. يمكنك التحقق من ذلك هنا: http://94.125.8.168/eng/ (انقر فوق علامة التبويب "بحث" أو علامة التبويب "الجدول الزمني" في الجزء الأوسط الذي يسمى معلومات الطيران). تحديد الوجهة ورقم الرحلة والمطار من المفترض أن يكون قد تم اختيارهما.

ffiona تحتاج إلى إنهاء المكالمة المختارة في وظيفة جاهزة jQuery .

$(document).ready(function() {
  $(".chzn-select").chosen();
});

يرجى محاولة الاحتفاظ بالأسئلة المستقبلية حول الموضوع لموضوع. إذا كان لديك سؤال ، فنحن نرحب بك لفتح عدد جديد.

pfiller هل هذه ميزة أنتم / أو ستعملون عليها يا رفاق؟ لقد جربت جميع الاختراقات الأخرى التي اختارها أجاكس ولكن لم يعمل أي منها حقًا. أحتاج هذا حقًا لأنني أعمل على تطبيق بورصة يقوم المستخدم بكتابة رموز الأسهم التي يمكن أن تحتوي على عشرات الآلاف منها كما تعلم.

@ all يبدو أن خياري للحصول على إكمال ajax التلقائي من المختار سيكون لقطة طويلة وقد أضطر إلى البحث عن بدائل. يمكن لأي شخص أن يوصي بأي بدائل أخرى تم اختيارها ث / هذه الميزة؟

لقد أنشأت أيضًا واحدًا مؤخرًا .. https://github.com/ksykulev/chosen-ajax-addition

ksykulev هل تصادف أن يكون لديك عرض حي لهذا في مكان ما؟

تضمين التغريدة
فقط اخترقوا مثالاً معًا بسرعة http://sykulev.com/ajaxchosen/index.html

لقد أضفت الكود ضمن / example في المستودع الخاص بي.

ksykulev : إصدارك يقوم بعمل رائع حقًا مع اختيارات فردية ، شكرًا! راجع للشغل لا يعمل مع التحديد المتعدد. قد ألقي نظرة على هذا إذا كان لدي بعض وقت الفراغ.

إصدار meltingice يفعل أشياء غريبة حقًا في التحديد المتعدد أيضًا ، أعتقد أنه لأنه لا يستخدم الوظائف المختارة على الإطلاق (لذا فإن جميع الأشياء التي تم حلها بشكل طبيعي في lib الأصلي ليست في إصدار ajax ، على سبيل المثال إعادة وضع الإدخال وتغيير الحجم بعد إرسال النتائج إلى العميل).

jbbarth : نعم أنت على صواب ، لم أختبرها مع التحديدات المتعددة لذا يمكنني فقط أن أتخيل أنها لا تعمل بشكل جيد. من حيث اكتمال مكتبتي ، يمكنني بالتأكيد إضافة دعم لها. سوف احصل عليه شكرا!

انتهى بي الأمر بتدوير نسختي الخاصة بالمظهر والمظهر بناءً على Chosen.

https://github.com/ivaynberg/select2

وهو يدعم مجموعات البيانات عن بعد ajax / jsonp والتمرير اللانهائي (التحميل البطيء لمجموعات البيانات البعيدة المقسمة إلى صفحات). لا يوجد دعم للتحديد المتعدد حتى الآن بالرغم من ذلك.

ivaynberg أنا كل العيون على هذا.

بمجرد أن تضغط على ميزة محاكاة ساخرة مع Chosen (على وجه التحديد دعم التحديد المتعدد الذي يشبه العلامات) ، يجب عليك بالتأكيد أن تصطدم بهذا الموضوع.

أنا أحب شكل ومظهر Chosen ، لكنه يترك الأشياء مرغوبة حقًا في التنفيذ.

عمل جميل جدا!

ivaynberg لقد لاحظت أنه لا يزال لديك رمز من المختار الذي يحسب على وجه التحديد عرض القائمة المنسدلة وإدخال البحث.

قد ترغب في التحقق من ذلك: https://github.com/harvesthq/chosen/pull/407

لقد قمت مؤخرًا بتحديث الإصدار الذي اخترته من أجاكس لدعم التحديدات المتعددة. http://sykulev.com/ajaxchosen/index.html

justindujardin يحتوي Select2 master الآن على ميزة التكافؤ. سوف ألقي نظرة على مواد التحجيم في 407 ، لكن يجب أن نأخذ المزيد من المناقشات لمشروع Select2's.

أنا غريب الحب Select2 وأوصي الجميع بالتبديل إليه. هيه.

@ ProLoser - شكرًا على ذلك ... بالضبط ما كنت أبحث عنه. يبدو أنه خيار أفضل بكثير.

حدد 2 FTW!

Select2 هو الطريق للذهاب!

أي تحديثات بعد كل هذه السنوات؟

لماذا تفتقد هذه الميزة عفريت؟

هم ... أن ينتن. قررت تطبيق Chosen بسبب تمييز النص ولكن لم أدرك أنه سيكون من الصعب جدًا إضافة AJAX. أعتقد أنه كان يجب أن أذهب مع select2 إذا كان الجميع يقفز من هذا للذهاب إلى ذلك كوسيلة لتلبية المتطلبات. :(

إنها ميزة رائعة. تقترح العديد من الشوكات هذه الميزة ولكن التنفيذ غالبًا ما يكون فوضويًا. : +1:

لقد توصلت إلى حل سهل لرقعة القرد:

AbstractChosen.prototype.winnow_results = (function(winnow_results) {
  return function() {
    if (this.options.source) {
      return this.options.source.call(this.form_field, this.search_field.val(), (function(_this) {
        return function(results) {
          var id, option, select;
          if (results) {
            select = document.createElement('select');
            select.appendChild(document.createElement('option'));
            for (id in results) {
              if (results.hasOwnProperty(id)) {
                option = document.createElement('option');
                option.value = id;
                option.textContent = results[id];
                select.appendChild(option);
              }
            }
            _this.results_data = SelectParser.select_to_array(select);
          }
          return winnow_results.call(_this);
        };
      })(this));
    } else {
      return winnow_results.call(this);
    }
  };
})(AbstractChosen.prototype.winnow_results);

يمكنك توفير خيار وظيفة "مصدر" من أجل المختار والذي سيتم استدعاؤه عند عرض النتائج. سيكون لها قيمة إدخال سلسلة ووسائط دالة رد الاتصال. تقدم وظيفة رد الاتصال الاقتراحات. إذا لم تكن النتائج قد تغيرت ، فعليك الاتصال بها على الفور بدون وسيطات ، وإلا يمكنك طلب النتائج وإرسالها إلى رد الاتصال عندما تحصل عليها. كائن النتائج له هذا التنسيق: { value: "label", value2: "label2" } . هنا مثال:

var select = $("#select"),
    value;
select.chosen({
    source: function (val, callback) {
        if (value != val) {
            value = val;
            $.get('/suggestions', { value: value }, callback);
        } else
            callback();
    }
});

يبدو أن ما يقترحهfaucct يعمل. ملاحظة ثانوية هي أنه إذا كنت تستخدم إصدار jquery ، فلن تتمكن من الوصول إلى AbstractChosen ، خارج النطاق المختار ، لذلك ربما ترغب في إضافة هذه الملفات إلى النطاق الداخلي المختار أو ستحتاج إلى تعديل ملف js المختار ونقل AbstractChosen و SelectParser إلى النطاق العام. هناك مشكلة أخرى تتمثل في أنه يقوم بتحديث القائمة المفتوحة (التي أنشأتها div التي تم اختيارها) ولكنها لا تقوم بتحديث "حقل التحديد" الفعلي ، وبالتالي فإن الخيار الذي حددته إذا لم يكن موجودًا في التحديد قد يؤدي إلى حدوث خطأ. الشيء الذي يجب ملاحظته أيضًا هو أن السلسلة التي كتبتها تُستخدم لتصفية النتائج التي ترجعها أيضًا. كما أنه يعمل في كل مرة تكتب شيئًا ما بحيث يمكنك التحكم يدويًا لعدم إجراء مكالمات.

لقد وجدت امتدادًا آخر هو هذا: https://github.com/meltingice/ajax-chosen

إنه يعمل بشكل جيد ولكن الإصدار الحالي معطل ، وقد أجريت بعض التعديلات الطفيفة. يجب عليك استبدال "chzn" بـ "المختار" حيث قامت المكتبة المختارة بتغيير أسماء css الداخلية. التغيير الأخير الذي يتعين عليك القيام به هو تشغيل "selected: updated " بدلاً من " listz: updated ". في الملف التمهيدي ، يطلب منك إصلاح خطأ في css ولكنه تم إصلاحه بالفعل في الإصدارات الأحدث ، لذلك لا تحتاج إلى القيام بذلك. يمكنك أيضًا تعيين بعض الخيارات المفيدة ، وإذا استمر المستخدم في الكتابة ، فسيقوم النظام بإلغاء المكالمات المعلقة أيضًا.

كانت هذه رحلتي :) ، أتمنى أن تساعد.

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

مصدر بعيد مختار (https://github.com/westonganger/chosen-remote-source)

الكود بأكمله بسيط إلى حد ما بأقل من 200 سطر من التعليمات البرمجية
https://github.com/westonganger/chosen-remote-source/blob/master/src/chosen-remote-source.js

كان الجزء الوحيد من Chosen المطلوب تصحيحه هو التالي:

// MONKEY PATCH CHOSEN TO NOT CLEAR THE SELECTED RESULTS UPON SEARCHING WITH
chosen_prototype.show_search_field_default = function() {
  if (this.is_multiple && this.choices_count() < 1 && !this.active_field) {
    this.search_field.val(this.default_text);
    return this.search_field.addClass("default");
  } else {
    if(this.default_text === this.search_field.val()){
      this.search_field.val(""); // ORIGINAL LINE, SURROUNDING IF STATEMENT IS CUSTOM
    }

    return this.search_field.removeClass("default");
  }
};
// END CHOSEN PATCH