چطور فرمی همانند پروفایل فیس بوک بسازیم؟؟

[sargardoon]

سلام دوستان،
کسی میدونه چطور میشه فرمی همانند پروفایل فیس بوک ساخت؟؟؟ برای مثال در قسمت مربوط به تحصیلات اگر دیده باشید:
1. میتوانید بیشتر از چند مدرک تحصیلی اضافه کرد
2. زمانی که حرفی تایپ میکنید لیستی از پیشنهادات را نشان میده که شما میتوانید با کلیک بروی یکی از آنها، آنرا انتخاب کنید. من نمونه ساده اش رو با jQuery ساختم که کلمات پیشنهادی را داخل تک div نشون میده (نمونه کد (http://barnamenevis.org/showthread.php?281109-%D8%B3%D8%A7%D8%AE%D8%AA-%DA%A9%D8%A7%D8%AF%D8%B1-%D8%AC%D8%B3%D8%AA%D8%AC%D9%88-%D8%AF%D8%B1-%D8%AE%D9%88%D8%AF-%D8%B3%D8%A7%DB%8C%D8%AA&p=1240485&viewfull=1#post1240485))

برای ذخیره کردن اطلاعات مشکلی نیست میشه همه اینها را به صورت Array یا Serialize ذخیره کرد، فقط نمیدونم چطور میشه بدون اینکه بخواهیم چندین input بسازیم اطلاعات را دریافت کنیم، و یا اینکه لیست از کلمات پیشنهادی مثل گزینه 2 باشه بسازم

امیدوارم که توانسته باشم منظورم رو خوب رسونده باشم.

[UnnamE]

يه راه مسخره اينه كه توي فيلد مربوط هر input رو در ديتابيس از با , يا هر كاراكتري دوس داري اضافه كني و بعد بكشي بيرون
راه ديگه هم One2Many Relation‌ هست

[sargardoon]

ممنونم که جواب دادید، منظور من برای ذخیره نبود، گفتم که برای ذخیره کاری نداره،
بذارید با یه مثال منظورم رو بگم
برای مثال من یه فرم طرحی کردم و کاربران آنجا مشخصات تحصیلی خودشون رو وارد میکنند، در اینجا ممکنه یه نفر چندتا لیسانس، فوق داشته باشه، خوب من میخواهم فرمی به صورت فیس بوک باشه که به صورت پیش فرض برای یه مدرک هستش، ولی اگر کاربر بخواد میتونه با خودش زیادترش کنه
سوال دومم هم این بود که برای راحتی کار کاربر و جلوگیری از تکرار یه اسم به روشهای مختلف (انجمن برنامه نویس، انجمن برنامه نویس.) یه لیست پیشنهادی مثل فیس بوک (و یا گوگل بده)، برای اینکار میشه با jQuery درست کرد ولی نمیدونم چطوری به صورت یه لیست بازشو درش بیارم.

برای ذخیره که گفتید به نظرم بهترین روش اینه که صورت Array و یا Serialize توی دیتابیس دخیره کرد و بعد زمان فراخوانی داخل برنامه آنها را از هم جدا کرد.

[طاها حک]

ممنونم که جواب دادید، منظور من برای ذخیره نبود، گفتم که برای ذخیره کاری نداره،
بذارید با یه مثال منظورم رو بگم
برای مثال من یه فرم طرحی کردم و کاربران آنجا مشخصات تحصیلی خودشون رو وارد میکنند، در اینجا ممکنه یه نفر چندتا لیسانس، فوق داشته باشه، خوب من میخواهم فرمی به صورت فیس بوک باشه که به صورت پیش فرض برای یه مدرک هستش، ولی اگر کاربر بخواد میتونه با خودش زیادترش کنه
سوال دومم هم این بود که برای راحتی کار کاربر و جلوگیری از تکرار یه اسم به روشهای مختلف (انجمن برنامه نویس، انجمن برنامه نویس.) یه لیست پیشنهادی مثل فیس بوک (و یا گوگل بده)، برای اینکار میشه با jQuery درست کرد ولی نمیدونم چطوری به صورت یه لیست بازشو درش بیارم.

برای ذخیره که گفتید به نظرم بهترین روش اینه که صورت Array و یا Serialize توی دیتابیس دخیره کرد و بعد زمان فراخوانی داخل برنامه آنها را از هم جدا کرد.

من چنین کاری کردم، با جاوااسکریپت. تو یه سایت یه فرم استخدام باید طراحی می کردم. چون ممکنه کاربر باید همه مدارکش رو وارد کنه و ممکنه یکی چند مدرک داشته باشه، لیسانس، فوق، و... من از یه تابع استفاده کردم که با زدن یه دکمه text box های دیگری اضافه بشه. و اسم این باکس ها به صورت تکست هست و به هرکدوم یه شماره اختصاص به پشت اسمش اضافه می شه و اونور من یه حلقه همه محتوی اینا رو می گیرم.

اینم کد جاوااسکریپتمه:

function funChange() {

input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", 'updatePG'); //set name
input.setAttribute("value", "");//set default value
input.setAttribute("id", 1);
editForm.appendChild(input);

}


editForm اسم فرمیه که این باکس بهش اضافه می شه. این تابع هم با زدن یه دکمه تو صفحه برا اضافه کردن باکس های بیشتر اجرا می شه
البته اینم بگم این برنامه رو برا یه فرم نوشتم. و نمی دونم اگه بخوای تو چندتا فرم این کار رو بکنی آیا راهی به جز نوضتن تک تک اسامی فرم ها هست یا نه

[sargardoon]

ممنونم عزیز ایده را گرفتم باید چطوری باشه، راههای مختلفی وجود داره،
حالا برای اینکه بخواهیم یه لیست از کلمات پیشنهادی مثل گوگل، فیس بوک داشت باید چه کار کرد؟

[Mr.Moghadam]

ممنونم عزیز ایده را گرفتم باید چطوری باشه، راههای مختلفی وجود داره،
حالا برای اینکه بخواهیم یه لیست از کلمات پیشنهادی مثل گوگل، فیس بوک داشت باید چه کار کرد؟
برای این کار توی خاصیت onkeyup یا onkeydown تکست باکست یه تابع js رو فراخوانی کن که اصلاعات رو به وسیله ای جکس بگیره و وان رو توی یه لیست باکس نشون بده . لیست باکس رو زیر تکست باکست بذار و مخفیش کن وقتی کاربر یک کلمه رو وارد کرد و هنگامی که اطلاعات رو به وسیله ای جکس دریافت کردی لیست باکس رو از حالت مخفی دربیار و . . .

[sargardoon]

برای این کار توی خاصیت onkeyup یا onkeydown تکست باکست یه تابع js رو فراخوانی کن که اصلاعات رو به وسیله ای جکس بگیره و وان رو توی یه لیست باکس نشون بده . لیست باکس رو زیر تکست باکست بذار و مخفیش کن وقتی کاربر یک کلمه رو وارد کرد و هنگامی که اطلاعات رو به وسیله ای جکس دریافت کردی لیست باکس رو از حالت مخفی دربیار و . . .
آیا با این کار سرعت برنامه پایین نمیاد؟
آیا راهی هم هست از خود لیست باکس به صورت مستقیم استفاده کرد؟
به نظرتون چطوره از div استفاده کرد و زیر textbox گذاشت و هر عبارت را داخل تگ li بذاریم و به وسیله AJAX یا jQuery اطلاعات را دریافت کنیم؟ و بعد با استفاده از استایل کمی بهش حالت بدیم؟؟؟

[Mr.Moghadam]

روش کلیش رو گفتم
اگر داخل تگ li فرار بدید آیا این امکان رو دارید که هر کردوم از ردیف ها رو با کلیدهای بالا و پایین انتخاب کنید؟

[sargardoon]

روش کلیش رو گفتم
اگر داخل تگ li فرار بدید آیا این امکان رو دارید که هر کردوم از ردیف ها رو با کلیدهای بالا و پایین انتخاب کنید؟
باز ممنونم از راهنمایی که کردید، اره میشه، تگ li داری ایندکس هستش، این یه نمونه ساده که میشه کمی دستکاریش کرد و استفاده کرد.

$('ul li').each(function(e) {
if (e != 2) {
$(this).css("background","#cccccc");
$(this).css("width", "300px");
}
$('li').eq(2).css("color","#EEAADD");
$('li').has('b').css("background","#EEAADD");
$('li').last().css("color","blue");
$(this).append(e);
});


<ul class="list1">
<li>This <b>is a list item</b> 1 | </li>
<li>This is a list item 2 | </li>
<li>This is a list item 3 | </li>
<li>This is a list item 4 | </li>
<li>This is a list item 5 | </li>
<li>This is a list item 6 | </li>
<li>This is a list item 7 | </li>
</ul>

<h2>This is Header2</h2>
<ul>
<li>This is a list item 1 | </li>
<li>This is a list item 2 | </li>
<li>This is a list item 3 | </li>
<li>This is a list item 4 | </li>
<li>This is a list item 5 | </li>
<li>This is a list item 6 | </li>
<li>This is a list item 7 | </li>
</ul>