jQuery UI تكوين بحث عن واجهة مستخدم تلقائية

Question

أنا أبحث في استخدام jQuery UI الإكمال التلقائي عنصر واجهة مستخدم لتنفيذ بحث المستخدم حسب الاسم الأول أو الأخير. يبدو أنه افتراضيًا ، يبحث الإكمال التلقائي عن الكلمات عن طريق تسلسل الأحرف بغض النظر عن حدوثه في كلمة واحدة. لذلك إذا كان لديك بيانات مثل: javascript, asp, haskell وأنت تكتب في 'as' سوف تحصل على الثلاثة. أود أن تطابق بداية الكلمة فقط. لذلك في مثال أعلاه تحصل فقط 'asp'. هل هناك طريقة لتكوين أداة الإكمال التلقائي للقيام بذلك؟

في النهاية سيكون من الأفضل تطابق ببداية الاسم الأول أو الأخير كما هو في Gmail.

ملاحظة: أحاول اكتشاف طريقة للقيام بذلك باستخدام عنصر واجهة مستخدم JQuery على وجه التحديد. نظرًا لأنني أستخدم بالفعل jQuery UI في مشروعي ، أخطط للالتزام به وأحاول عدم إضافة مكتبات إضافية إلى تطبيق الويب الخاص بي.

Answer 1

في jquery ui v1.8rc3 ، أداة الإكمال التلقائي يقبل أ مصدر الخيار الذي يمكن أن يكون إما سلسلة أو صفيف أو وظيفة رد الاتصال. إذا كانت سلسلة ، فإن الإكمال التلقائي يحصل على عنوان URL للحصول على الخيارات/الاقتراحات. إذا قامت صفيف ، فإن الإكمال التلقائي يقوم بالبحث ، كما أشرت ، لوجود chars المكتوبة في أي موضع في شروط الصفيف. المتغير النهائي هو ما تريده - وظيفة رد الاتصال.

من الوثائق الإكمال التلقائي:

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

• أ request كائن ، مع خاصية واحدة تسمى "المصطلح" ، والتي تشير إلى القيمة الموجودة حاليًا في إدخال النص. على سبيل المثال ، عندما أدخل المستخدم "New Yo" في حقل المدينة يتم تعيينه على الإكمال التلقائي ، request.term سوف عقد "يو يو".
• أ response وظيفة ، رد اتصال يتوقع أن تحتوي وسيطة واحدة على البيانات التي تشير إلى المستخدم. يجب ترشيح هذه البيانات استنادًا إلى المصطلح المقدم ، ويجب أن تكون صفيفًا في التنسيق المسموح به لبيانات محلية بسيطة: الأسلوب أو المباراة الكائن مع التسمية/القيمة/كلتا الخصائص.

رمز المثال:

var wordlist= [ "about", "above", "across", "after", "against",
                "along", "among", "around", "at", "before", 
                "behind", "below", "beneath", "beside", "between", 
                "beyond", "but", "by", "despite", "down", "during", 
                "except", "for", "from", "in", "inside", "into", 
                "like", "near", "of", "off", "on", "onto", "out", 
                "outside", "over", "past", "since", "through", 
                "throughout", "till", "to", "toward", "under", 
                "underneath", "until", "up", "upon", "with", 
                "within", "without"] ; 

$("#input1").autocomplete({
    // The source option can be an array of terms.  In this case, if
    // the typed characters appear in any position in a term, then the
    // term is included in the autocomplete list.
    // The source option can also be a function that performs the search,
    // and calls a response function with the matched entries.
    source: function(req, responseFn) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var a = $.grep( wordlist, function(item,index){
            return matcher.test(item);
        });
        responseFn( a );
    }
});

بعض النقاط الرئيسية:

• الدعوة إلى $.ui.autocomplete.escapeRegex(req.term); الذي - التي يهرب يتم التعامل مع مصطلح البحث بحيث يتم التعامل مع أي مصطلحات regex-meoningful في النص الذي كتبه المستخدم كنص عادي. على سبيل المثال ، النقطة (.) ذات مغزى ل regex. لقد تعلمت وظيفة Escaperegex هذه من خلال قراءة رمز المصدر الإكمال التلقائي.
• الخط مع new Regexp(). إنه يحدد regexp بدءًا من ^ (circeflex) ، مما يعني أنه لن يتطابق إلا عندما تظهر الشخصيات المكتوبة في بداية المصطلح في المصفوفة ، وهو ما تريده. كما أنه يستخدم خيار "I" الذي ينطوي على تطابق غير حساس للحالة.
• ال $.grep() الأداة المساعدة تستدعي الوظيفة المقدمة على كل مصفاة في الصفيف المقدم. تستخدم الوظيفة في هذه الحالة ببساطة regexp لمعرفة ما إذا كان المصطلح في الصفيف هو تطابق لما تم كتابته.
• أخيرًا ، يتم استجواب Responsefn () مع نتيجة البحث.

العرض التوضيحي: http://jsbin.com/ezifi

ما يبدو عليه:

مجرد ملاحظة: أجد أن الوثائق على الإكمال التلقائي غير ناضجة في هذه المرحلة. لم أجد أمثلة فعلت ذلك ، ولم أتمكن من العثور على مستندات عمل كانت ملفات .CSS ضرورية أو والتي سيتم استخدام فئات .CSS. لقد تعلمت كل هذا من فحص الكود.

أنظر أيضا، كيف يمكنني تنسيق نتائج الإكمال التلقائي؟

Answer 2

يمكنني استخدام الإكمال التلقائي من Devbridge. http://www.devbridge.com/projects/autocomplete/jquery/

يتطابق مع الشخصيات البداية ، فقط.

بقدر المطابقة بناءً على الاسم الأول أو الاسم الأخير ، يجب عليك فقط توفير قائمة بحث بالاسم الأول والأخير.

مثال الاستخدام:

  var wordlist = [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November',
      'December' ]; 

      var acOptions = {
          minChars:2,
          delimiter: /(,|;)\s*/, // regex or character
          maxHeight:400,
          width:300,
          zIndex: 9999,
          deferRequestBy: 10, // miliseconds

          // callback function:
          onSelect: function(value, data){
              //$('#input1').autocomplete(acOptions);
              if (typeof data == "undefined") {
                  alert('You selected: ' + value );
              }else {
                  alert('You selected: ' + value + ', ' + data);
              }
          },

          // local autosuggest options:
          lookup: wordlist
      };

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

var lookuplist = {
    suggestions:   [ "Jan", "Feb", "Mar", "Apr", "May" ],
    data :         [ 31, 28, 31, 30, 31, ]
};

Answer 3

Thx Cheeso لإثارة jsbin.com ،

لقد قمت بتوسيع رمزك لدعم مباريات الاسم الأولى والأستاذ أيضًا.

  $("#input1").autocomplete({
      source: function(req, responseFn) {
          addMessage("search on: '" + req.term + "'<br/>");

          var matches = new Array();
          var needle = req.term.toLowerCase();

          var len = wordlist.length;
          for(i = 0; i < len; ++i)
          {
              var haystack = wordlist[i].toLowerCase();
              if(haystack.indexOf(needle) == 0 ||
                 haystack.indexOf(" " + needle) != -1)
              {
                  matches.push(wordlist[i]);
              }
          }

          addMessage("Result: " + matches.length + " items<br/>");
          responseFn( matches );
      }
  });

العرض التوضيحي: http://jsbin.com/ufimu3/

اكتب "A" أو "إعادة"

Answer 4

إذا كنت ترغب في البحث في بداية كل كلمة في السلسلة ، فإن الحل الأكثر أناقة لـ Henchman's هو أخذ تشيزو ولكن فقط استخدم حرف regexp الحدود الخاصة:

var matcher = new RegExp( "\\b" + re, "i" );

مثال: http://jsbin.com/utojoh/2 (حاول البحث عن "BL")

Answer 5

هناك مكون الإكمال التلقائي آخر jQuery يبحث ذلك اختياريًا في بداية كل عنصر (الخيار هو matchContains=false, ، أعتقد أن هذا هو الافتراضي أيضًا).

بالنظر إلى عدم وجود مثل هذا الخيار في المكون الإضافي JQuery UI ، أعتقد أنه عليك إما استخدام مكون إضافي مختلف ، أو إعادة كتابة المكون الذي تستخدمه الآن.

Answer 6

من أين تحصل على البيانات لملء الإكمال التلقائي؟ هل هو من قاعدة بيانات؟ إذا كان الأمر كذلك ، فيمكنك أن تفعل ما تريد في استفسارك وإرجاع النتائج التي تتطابق مع بداية كل كلمة (الاسم الأول/الأخير)