jQuery AutoComplete: باستخدام مفتاح وتسمية صفيف JS المحلي؟ يساعد!

Question

أقوم بعمل صفحة ويب iPhone بسيطة تدرج حوالي 200 مصطلح طبي وتعريفاتها. أنا أستخدم jQuery AutoComplete للسماح للمستخدم بالبحث في المصطلحات ديناميكيًا ، وعندما ينقر على المصطلح الذي يريدونه ، أريد عرض تعريف المصطلح أدناه. أحتاج إلى مساعدة في إعداد مجموعة JS مع كل من المصطلح والتعريف في وقت واحد.

حاليا ، لدي صفيف محمل على هذا النحو:

var terms = [
        "Abdomen",
        "Ability",
        "Abolish",
etc...

لكن ما أفضله هو إذا كنت أعرف كيفية تحميل مصطلح وتعريفه في صفيف مثل هذا:

terms['Abdomen'] = 'stomach, stomach area, belly, tummy';
terms['Ability'] = 'skill';
terms['Abolish'] = 'end, do away with, get rid of';

على أي حال ، في نهاية terms قائمة الصفيف أقوم بتنشيط رمز الإكمال التلقائي على هذا النحو:

$( "#terms" ).autocomplete({ source: terms,});
    $( "#terms" ).autocomplete({ minLength: 2 });
    $( "#terms" ).autocomplete({ delay: 0 });
    $( "#terms" ).autocomplete({ select: function(event, ui) 
    { 
        var myDiv1 = document.getElementById("content");
        myDiv1.appendChild(document.createTextNode(ui.item.label));
    }

في الوقت الحالي ، كل هذا هو عندما ينقر المستخدم على المصطلح في قائمة القائمة المنسدلة ، وهو المصطلح نفسه المعروف باسم ui.item.label يتم كتابة فقط إلى content div. ما أريده هو أن يتم كتابة تعريف المصطلح. كيف يمكنني إعداد هذا في jQuery حيث يمكنني الحصول على وظيفة SELECT التلقائية ببساطة اكتب التعريف وليس المصطلح/التسمية؟

Answer 1

According to This example you should be able to add all the properties you want in your source data array and be able to access them on the select event.

So your source data array could look like this:

var terms = [
    {label : "Abdomen", desc: "stomach, stomach area, belly, tummy"},
    {label : "Ability", desc: "skill"},
    {label : "Abolish", desc: "end, do away with, get rid of"}
etc...

and then in your select event definition do this:

$( "#terms" ).autocomplete({ select: function(event, ui) 
{ 
    var myDiv1 = document.getElementById("content");
    myDiv1.appendChild(document.createTextNode(ui.item.desc));
}

So the difference is that you can then use ui.item.desc instead of ui.item.label like you were using before.

Answer 2

قم بإنشاء مجموعة JS أخرى منفصلة مع المصطلح كفهرس السلسلة ، كما تظهر. نسميها شيئًا آخر مثل definitions, ، ليس terms. ثم عندما تريد إلحاق Div "المحتوى" ، قم بإنشاء مثل هذا

var newDefinition = definitions[ui.item.label];

وسيسمي ذلك تعريف المصطلحات. ثم استخدم وظيفة AppendChild كما كنت تفعل فقط.