Autocomplate مثل سایت فیس بوک

[merlin425]

سلام دوستان چه طور میشه همچین Autocomplate مثل عکی که ضمیمه کردم و از محیط سایت فیس بوک هست رو در اختیار کاربر قرار داد یعنی Autocomplate معمولی که فقط Text نشون کاربر بده رو میتونم طراحی کنم ولی اینکه کنارش عکس هم قرار بده نمی دو نم چه طوریه اگه کسی این رو میدونه ممنون میشم بهم کمک کنه

از توجهتون ممنون

[jalil_gh]

شما میتونید اطلاعات رو از سمت سرور به صورت json ارسال کنید و تو مرورگر به ازای هر داده یک رشته html درست کنید و اونو به سند اضافه کنید.
فرض کنیم اطلاعات ارسالی از سمت سرور به این صورته.
[
{
"name": "name1",
"country": "country1",
"city": "city1",
"url": "url1.png"

},
{
"name": "name2",
"country": "coutntry2",
"city": "city2",
"url": "url2.png"

},
{
"name": "name3",
"country": "country3",
"city": "city3",
"url": "url3.png"
}

]
شما میتونید این اطلاعات رو با JSON.parse به آرایه‌ای از آبجکت‌های جاوااسکریپت تبدیل کنید و به اطلاعات درون اون دسترسی پیدا کنید. بعدش میتونید با استفاده از این اطلاعات یک رشته html ایجاد کنید، اونو به یک عنصر نسبت بدید و این عنصر رو به سندتون اضافه کنید.
var data = JSON.parse(dataRecievedFromServer);

// this holds the autocomplete data
var holder = document.getElementById('holder');

for (var i = 0; i < data.length; i++) {
var htmlStr = "<span class='name'>" + data[i].name + "</span>" +
"<span class='country'>" + data[i].country + "</span>" +
"<span class='city'>" + data[i].city + "</span>" +
"<img src='" + data[i].url + "'>";

var div = document.createElement('div');
div.className = 'friend';
div.innerHTML = htmlStr;
holder.appendChild(div);
}
البته این کارا با template های سمت مرورگر راحتتر انجام میشه.