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.
|
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) ); |
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.
|
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 |
<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; // @ 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> |
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
|
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 } } ?> |
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
|
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 } |
