Главная > JavaScript > Jquery getJSON : выпадающий список пользователей, или фильтруем друзей.

Jquery getJSON : выпадающий список пользователей, или фильтруем друзей.

04 Окт 2009

Писал для одного из своих проектов внутреннюю почту. И когда накопилось много писем, меня попросили сделать фильтр по пользователям. И я задумался, как организовать выбор пользователя по которому будем фильтровать. Ответ пришел сразу, как только зашел в контакт (vkontakte.ru). И сделал нечто подобное. Решил не комуниздить их код, а написать свой (тем более что в их нем коде разбираться дольше, чем написать самостоятельно).

Я выводил всех пользователей, которым уже отправлялись письма, и от которых письма приходили. Но сейчас сделаем проще, будем выводить всех пользователей.

И так, вот пример.

Пример : смотреть

А теперь код:
Допустим, у нас есть таблица с пользователями:

id name fname img

… … … …

id – номер пользователя
name – имя пользователя
fname – фамилия пользователя
img – аватарка пользователя

index.html

<center>
Фильтр по пользователям
<table width="450px" >
<tr>
<td align="left">
<input type="text" value="" name="filter" id="filter">
</td>
</tr>
<tr>
<td>
<div id="userList"></div>
</td>
</tr>
</table>
</center>

в userList мы будем выводить пользователей

script.js

$(document).ready(function() {
var users;
/*
получаем данные из файла listUsers.php
*/
$.getJSON("listUsers.php", function(json) {
users = eval(json);
});

$("#filter").keydown(function() {
/*
очищаем список
*/
$("#userList").html("");
/*
setTimeout необходим потому что имел место эффект запаздывания. Сначала выбирался список пользователей,
а потом только определялся введенный символ.
*/
setTimeout(function() {
for (i = 0; i < users.length; i++) {
slovo = $("#filter").val();
/*
Здесь мы сравниваем введенные символы с таким же количеством начальных символов имени и фамилии.
Все это приведено в один регистр.
*/
if (users[i].name.substr(0, slovo.length).toLowerCase() == slovo
.toLowerCase()||users[i].fname.substr(0, slovo.length).toLowerCase() == slovo
.toLowerCase()) {
/*
Ну и выводим на экран пользователя.
*/
$("<div class='user'><img src='img/" + users[i].img
+ "' ><div class='userData'><b>" + users[i].name
+ "</b> " + users[i].fname + "</div></div>")
.appendTo("#userList");
}
}

}, 10);
});
});

listUsers.php
Что же находится в listUsers.php

/*
тут подключаемся к базе, надеюсь вы знаете как это делается =)
*/
$sql=mysql_query("SELECT * FROM `users` ORDER BY `name`");
while($row=mysql_fetch_assoc($sql))
{
$user[]=$row;
}
/*
Возвращаем данные
*/
echo json_encode($array);

Добавим немного стилей

body {
font-family: Tahoma;
} .user {
width: 400px;
margin: 2px;
border-bottom: 1px solid #242424;
height: 30px;
} .user img {
float: left;
padding-right: 5px;
width: 30px;
height: 30px;
} .clear {
clear: both;
} .userData {
font-size: 12px;
margin-left: 35px;
border-bottom: 1px dashed #c0c0c0;
}

Как видите, все очень просто.
Можете скачать пример и посмотреть, как все работает у меня