Hướng dẫn code giống kiểu facebook tag

Admin · 1 Hướng dẫn code giống kiểu facebook tag Wed May 02, 2012 7:31 pm

Admin

Tổng số bài gửi : 34
Points : 44099
Reputation : 0
Join date : 30/04/2012

Hướng dẫn code giống kiểu facebook tag

Nếu
các bạn đã sử dụng facebook chắc hẳn sẽ không thể không biết chức năng
tag friend vào status hay photo của facebook. Cách thức tag rất đơn giản
đó là bạn chỉ cần gõ phím @ và facebook sẽ hiển thị ra một hộp thoại
cho phép bạn gõ tiếp các chữ cái. Mỗi lần bạn gõ 1 chữ cái là facebook
sẽ tự truy vấn ra các kết quả là friend của bạn có tên chứa hoặc bắt đầu
bằng chữ cái đó.

Hướng dẫn code giống kiểu facebook tag Facebooktagfriend

Hướng dẫn code giống kiểu facebook tag
Việc
bạn gõ càng nhiều chữ cái sẽ khiến kết quả bạn tìm được friend của bạn
chính xác hơn. Và việc còn lại là bạn chỉ còn click vào đúng tên friend
đó để chèn tag vào status hoặc photo mà bạn muốn tag friend đó vào. Chức
năng thật tiện lợi và thú vị phải không nào.
Ok trong bài này
mình sẽ hướng dẫn các bạn tạo ra chức năng như thế dựa trên Jquery,
Ajax, PHP và cơ sở dữ liệu của chính các bạn tạo ra Hướng dẫn code giống kiểu facebook tag Icon_smile

Việc
đầu tiên các bạn cần làm đó là tạo một Cơ sở dữ liệu (csdl) mới với tên
bất kỳ, và tạo một bảng có cấu trúc gồm các field uid, fname, lname,
country, img. Đặt thuộc tính cho field uid là khóa chính và
auto_increment. Ở đây mình đặt tên là “user_data” và câu lệnh sql của
mình như sau:

1
2
3
4
5
6
7
8

CREATE TABLE user_data
(
uid INT AUTO_INCREMENT PRIMARY KEY,
fname VARCHAR(25),
lname VARCHAR(25),
country VARCHAR(25),
img VARCHAR(50)
);

Lưu ý:
Bạn cũng có thể sử dụng chức năng tạo csdl mới trong phpmyadmin và tạo
ra các field với chỉ vài thao tác click chuột mà không cần phải dùng
lệnh sql bên trên.
Tiếp tục các bạn tạo một file với tên “tagfriends.html” trong file này có chứa đoạn lệnh:

1	$("#contentbox").live("keyup",function(){}

Trong đó “contentbox” chính là ID của thẻ div sẽ dùng để cập nhật giá trị friend của bạn vào.
Hàm:

1	$(this).text()

chính là để lấy giá trị hiện thời trong “contentbox”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

Đoạn:

1	$(".addname").live("click",function(){}

Trong đó “addname” chính là class liên kết tên friend tìm thấy để bạn chọn.
Và:

1	$(this).attr('title')

chính là lấy giá trị title của class liên kết tên friend tìm thấy, đây chính là tên friend của bạn
Lưu ý: là thẻ div “contentbox” có chứa thuộc tính là:

1	contenteditable="true"

Tiếp tục bạn tạo một file mới với tên “boxsearch.php” có nội dung sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php
include('config.php');
if($_POST)
{
$q=$_POST['searchword'];
$q=str_replace("@","",$q);
$q=str_replace(" ","%",$q);
$sql_res=mysql_query("select * from user_data where fname like '%$q%' or lname like '%$q%' order by uid LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$fname=$row['fname'];
$lname=$row['lname'];
$img=$row['img'];
$country=$row['country'];
?>
<div class="display_box" >
<img src="user_img/<?php echo $img; ?>" class="image" />
<a href="#" class='addname' title='<?php echo $fname; ?> <?php echo $lname; ?>'>
<?php echo $fname; ?> <?php echo $lname; ?> </a>
</div>
<?php
}
}
?>

Bước cuối cùng là tạo file mới tên là “config.php” có nội dung sau:

1
2
3
4
5
6
7
8
9

<?php
$mysql_hostname = "hostname";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "databasename";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>

Lưu ý: là trong file này các bạn hãy đổi các thông số cho phù hợp với thông số csdl trên máy bạn.
Nếu bạn muốn định dạng một chút cho đẹp bạn có thể sử dụng css sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#container
{
margin:50px; padding:10px; width:460px
}
#contentbox
{
width:458px; height:50px;
border:solid 2px #333;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:6px;
text-align:left;
}
#msgbox
{
border:solid 1px #dedede;padding:5px;
display:none;background-color:#f2f2f2
}
#display
{
display:none;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
.display_box
{
padding:4px; border-top:solid 1px #dedede; font-size:12px; height:30px;
}
.display_box:hover
{
background:#3b5998;
color:#FFFFFF;
}
.image
{
width:25px; float:left; margin-right:6px
}

Ok đến đây là cơ bản đã hoàn thành và tổng kết lại chúng ta có file “tagfriends.html” đầy đủ như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hướng dẫn code giống kiểu facebook tag</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{

var start=/@/ig;
var word=/@(w+)/ig;

$("#contentbox").live("keyup",function()
{
var content=$(this).text();
var go= content.match(start);
var name= content.match(word);
var dataString = 'searchword='+ name;

if(go.length>0)
{
$("#msgbox").slideDown('show');
$("#display").slideUp('show');
$("#msgbox").html("Type the name of someone or something...");
if(name.length>0)
{
$.ajax({
type: "POST",
url: "boxsearch.php",
data: dataString,
cache: false,
success: function(html)
{
$("#msgbox").hide();
$("#display").html(html).show();
}
});

}
}
return false();
});

$(".addname").live("click",function()
{
var username=$(this).attr('title');
var old=$("#contentbox").html();
var content=old.replace(word,"");
$("#contentbox").html(content);
var E="<a class='red' contenteditable='false' href='#' >"+username+"</a>";
$("#contentbox").append(E);
$("#display").hide();
$("#msgbox").hide();
$("#contentbox").focus();
});

});
</script>
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#contentbox
{
width:458px; height:50px;
border:solid 2px #333;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:6px;
text-align:left;
}
.img
{
float:left; width:150px; margin-right:10px;
text-align:center;
}
#msgbox
{
border:solid 1px #dedede;padding:5px;
display:none;background-color:#f2f2f2
}
.red
{
color:#cc0000;
font-weight:bold;
}
a
{
text-decoration:none;
}
a:hover
{
text-decoration:none;
}
#display
{
display:none;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
.display_box
{
padding:4px; border-top:solid 1px #dedede; font-size:12px; height:30px;
}

.display_box:hover
{
background:#3b5998;
color:#FFFFFF;
}
.display_box a
{
color:#333;
}
.display_box a:hover
{
color:#fff;
}
#container
{
margin:50px; padding:10px; width:460px
}
.image
{
width:25px; float:left; margin-right:6px
}

</style>
</head>

<body>
<div id="xxx"></div>
<div id="container">
<div id="contentbox" contenteditable="true">
</div>
<div id='display'>
</div>
<div id="msgbox">
</div>
</div>

</body>
</html>

Đến đây là các bạn đã có được code giống kiểu facebook tag rồi. Bây giờ tiến hành test thử.
Lưu ý: Để có thể test script các bạn phải chèn vào bảng “user_data” một vài bản ghi chứa tên mẫu cơ bản.
Chúc thành công ! Hướng dẫn code giống kiểu facebook tag Icon_smile

Hướng dẫn code giống kiểu facebook tag

1 Hướng dẫn code giống kiểu facebook tag Wed May 02, 2012 7:31 pm

Admin