Chia sẻ code Facebook Style Tag Friend với Jquery, Ajax và PHP

Bài viết sau sẽ hướng dẫn các bạn thực hiện làm việc mention như Tag friend của facebook. Bài viết sử dụng Jquery, Ajax và PHP. Với thủ thuật này, các bạn ứng dụng rất nhiều vào hệ thống project thêm phong phú.

Thiết kế Database

Trước hết chúng ta sẽ tạo một database để lưu trữ dữ liệu về người dùng bao gồm Họ tên, thành phố và ảnh đại diện.

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

CREATE TABLE user_data

(

uid INT AUTO_INCREMENT PRIMARY KEY,

fname VARCHAR(25),

lname VARCHAR(25),

country VARCHAR(25),

img VARCHAR(50)

);

Thiết kế khung HTML

Tiếp theo là thiết kế 1 trang html cho phép user nhập và hiển thị dữ liệu. Đoạn code trong file html bao gồm các đoạn mã jquery và Ajax. Các bạn có thể xem lại bài viếthướng dẫn lấy dữ liệu ra Repeater sử dụng Jquery và Ajax.

Đầu tiên là jquery thực hiện việc xác định ký tự @ để thực hiện việc mention, cứ sau mỗi ký tự @, hệ thống sẽ xử lý dữ liệu trong database để hiển thị ra. Sau đó là các hiệu ứng jquery dành cho việc hiển thị. Và các đoạn ajax gọi file boxsearch.php. File này sẽ xử lý dữ liệu do user nhập vào, sau đó tìm kiếm trong cơ sở dữ liệu, và hiển thị chúng ra.

<script type="text/javascript" src="https://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var start=/@/ig; // @ Match
var word=/@(\w+)/ig; //@abc Match

$("#contentbox").live("keyup",function() 
{
var content=$(this).text(); //Content Box Data
var go= content.match(start); //Content Matching @
var name= content.match(word); //Content Matching @abc
var dataString = 'searchword='+ name;
//If @ available
if(go.length>0)
{
$("#msgbox").slideDown('show');
$("#display").slideUp('show');
$("#msgbox").html("Type the name of someone or something...");
//if @abc avalable
if(name.length>0)
{
$.ajax({
type: "POST",
url: "boxsearch.php", // Database name search 
data: dataString,
cache: false,
success: function(data)
{
$("#msgbox").hide();
$("#display").html(data).show();
}
});
}
}
return false();
});

//Adding result name to content box.
$(".addname").live("click",function() 
{
var username=$(this).attr('title');
var old=$("#contentbox").html();
var content=old.replace(word," "); //replacing @abc to (" ") space
$("#contentbox").html(content);
var E="<a class='red' contenteditable='false' href='#' >"+username+"</a>";
$("#contentbox").append(E);
$("#display").hide();
$("#msgbox").hide();
});
});
</script>
//HTML Code
<div id="container">
<div id="contentbox" contenteditable="true">
</div>
<div id='display'>
</div>
<div id="msgbox">
</div>
</div>

ajax/libs/jquery/1.4.2/jquery.min.js"></script>

$(document).ready(function()

{

var start=/@/ig; // @ Match

var word=/@(\w+)/ig; //@abc Match

$("#contentbox").live("keyup",function()

{

var content=$(this).text(); //Content Box Data

var go= content.match(start); //Content Matching @

var name= content.match(word); //Content Matching @abc

var dataString = 'searchword='+ name;

//If @ available

if(go.length>0)

{

$("#msgbox").slideDown('show');

$("#display").slideUp('show');

$("#msgbox").html("Type the name of someone or something...");

//if @abc avalable

if(name.length>0)

{

$.ajax({

type: "POST",

url: "boxsearch.php", // Database name search

data: dataString,

cache: false,

success: function(data)

{

$("#msgbox").hide();

$("#display").html(data).show();

}

});

}

return false();

});

//Adding result name to content box.

$(".addname").live("click",function()

{

var username=$(this).attr('title');

var old=$("#contentbox").html();

var content=old.replace(word," "); //replacing @abc to (" ") space

$("#contentbox").html(content);

var E="<a class='red' contenteditable='false' href='#' >"+username+"</a>";

$("#contentbox").append(E);

$("#display").hide();

$("#msgbox").hide();

});

</script>

//HTML Code

</div>

</div>

</div>

tập tin Boxsearch.php

Tập tin này bao gồm include config.php và đoạn SQL query lấy dữ liệu từ Database sau đó hiển thị dữ liệu

<?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; ?>&nbsp;<?php echo $lname; ?>'>
<?php echo $fname; ?>&nbsp;<?php echo $lname; ?> </a>
</div>
<?php
}
}
?>

<?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'];

<img src="user_img/<?php echo $img; ?>" class="image" />

<?php echo $fname; ?> <?php echo $lname; ?> </a>

</div>

<?php

}

Cuối cùng là CSS

Một vài dòng CSS đơn giản. Nếu bạn thích cầu kỳ thì có thể tham khảo loạt bài viết về style css tại đây

#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
}

#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

}

Download code Facebook Tag

[jbutton link=”https://www.kleii.com/f/5038bec4882567550500007b” icon=”download” color=”orange”]Download Code[/jbutton]

Facebook Style Tag Friend với Jquery, Ajax và PHP

Thiết kế Database

Thiết kế khung HTML

tập tin Boxsearch.php

Cuối cùng là CSS

Download code Facebook Tag

Like this:

Có liên quan

Nguyễn Trung Hiếu

Thiết kế Database

Thiết kế khung HTML

tập tin Boxsearch.php

Cuối cùng là CSS

Download code Facebook Tag

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu