Home »

Autocomplete Search với Jquery và Webservice

3 thg 9, 2013

Dùng google và facebook nhiều, bạn đã bao giờ để ý tới việc làm sao có thể làm được hệ thống tìm kiếm như 2 ông lớn đó.Vậy thì bạn nên đọc bài viết sau đây, tôi sẽ hướng dẫn bạn cách làm một hệ thống như vậy rất đơn giản với jquery và webservice

Autocomplete Search với Jquery và Webservice

Dùng google và facebook nhiều, bạn đã bao giờ để ý tới việc làm sao có thể làm được hệ thống tìm kiếm như 2 ông lớn đó.Vậy thì bạn nên đọc bài viết sau đây, tôi sẽ hướng dẫn bạn cách làm một hệ thống như vậy rất đơn giản với jquery và webservice

OK! không giới thiệu nhiều, bắt tay vào việc thôi:
I. Database
Thiết kế một cái database đơn giản chứ nhỉ:
?
1
2
3
4
5
6
CREATE TABLE site_tb
(
title varchar(50),
img  varchar(50),
href  varchar(150)
)
Và sau đó là dữ liệu nữa chứ:
?
1
2
3
4
5
6
7
8
INSERT INTO site_tb (title,img,href)
VALUES ('Facebook is a social network' ,'fb.png' ,'http://www.facebook.com')
INSERT INTO site_tb (title,img,href)
VALUES ('Twitter is a social network' ,'tw.png' ,'http://www.twitter.com')
INSERT INTO site_tb (title,img,href)
VALUES ('Google+  is a social network' ,'gp.png' ,'http://plus.google.com')
INSERT INTO site_tb (title,img,href)
VALUES ('YouTube is a place to discover, watch' ,'yt.png' ,'http://www.youtube.com')
II. Webpage
Tiếp theo là phần css cho hệ thống của chúng ta.
?
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
<!--
.content
{
margin:50px auto;
text-align:center;
width:422px;
}
#txtSearch
{
padding:10px;
border:solid 1px #cccccc;
width:400px;
color:#555555;
font: 18pt tahoma;
}
.divResult
{
position:absolute;
background-color:#F2F2FF;
border-style:solid;
border-width:1px;
border-color:#999999;
padding:10px;
margin:0 auto;
width:400px;
text-align:left;
display:none;
}
.img
{
width:60px;
height:60px;
margin:5px;
float:left;
}
.txtResult
{
display:block;
width:300px;
height:60px;
padding:5px;
margin:5px;
color:#555555;
font: 14pt tahoma;
text-decoration:none;
}
.loading
{
font: 10pt tahoma;
text-align:center;
}
.record
{
margin:2px;
}
-->
Tiếp nữa là code HTML, độ khó tăng dần rồi đây:
?
1
2
3
4
5
6
7
<div class="content">
<input id="txtSearch" onkeyup="search()" type="text" />
<div class="divResult">
<div class="loading">Loading..</div>
<div class="record"></div>
</div>
</div>
OK! nhắc tới Jquery tại sao nãy giờ lại quên không đả động gì tới nó nhỉ, thêm đoạn này vào thẻ head nhé:
?
1
<script src="jquery-1.4.3.min.js" type="text/javascript"></script>
Rồi! đoạn này mới khó nè. Chúng ta phải viết một hàm trong javascript để bắt sự kiện người dùng nhập ký tự tìm kiếm vào ô có id = txtSearch, để nếu có giá trị thì sẽ cho phép thẻ divResult hiện ra, còn không thì cho nó ẩn đi.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
function search() {
if ($("#txtSearch").val() != "") {
$(".divResult").show(); //show div block that contain on result
$(".loading").show(); // show loading text while getting result
//here we will put code that call search function on web service
}
else {
$(".divResult").hide(); //hide div that contain result when the input text is empty
$(".record").html(""); //also loading text when the input text is empty
}
}
</script>
III. Webservice
Xong đoạn trình hiển thị rồi, giờ là công đoạn tạo webservice để thực hiện truy vấn tìm kiếm dữ liệu trong csdl
1- Vào visual studio, tạo một webservice có tên là Webservice.asmx
2- Khai báo lớp toàn cục searchResult như sau:
?
1
2
3
4
5
6
7
8
9
10
11
12
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;
public class searchResult
{
public string Title;
public string img;
public string href;
}
//Etc.
3- Bạn phải thêm dòng sau để webservice có thể gọi được script ngoài webpage:
?
1
[System.Web.Script.Services.ScriptService]
4- Thêm dòng sau để webservice có thể sử dụng class searchResult mà chúng ta vừa định nghĩa:
?
1
[System.Web.Script.Services.GenerateScriptType(typeof(searchResult))]
5- Khai báo một phương thức tìm kiếm dưới thẻ [webmethod]
?
1
2
3
4
5
[WebMethod]
public searchResult[] Search(string txtSearch)
{
//txtSearch parameter will receive a text from client to search about
}
6- Và đoạn code thực hiện việc tìm kiếm trong csdl:
?
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
[WebMethod]
public searchResult[] Search(string txtSearch)
{
//Semuler to slow internet connection
//System.Threading.Thread.Sleep(2000);
//Declare collection of searchResult
List resultList = new List();
string constr =
System.Web.Configuration.WebConfigurationManager.ConnectionStrings["conn"]
.ConnectionString; ;
SqlConnection con = new SqlConnection(constr);
SqlCommand cmd = con.CreateCommand();
cmd.CommandText = "select * from site_tb where title like '%" + txtSearch + "%'";
try
{
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
searchResult result = new searchResult();
result.Title = dr["title"].ToString();
result.img = dr["img"].ToString();
result.href = dr["href"].ToString();
resultList.Add(result);
}
con.Close();
return resultList.ToArray();
}
catch
{
return null;
}
}
7- Gọi webservice sử dụng jquery ở trên:
?
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
<script type="text/javascript">
function search() {
if ($("#txtSearch").val() != "") {
$(".divResult").show(); //show div block that contains on result
$(".loading").show(); // show loading text while getting result
//call web searvice
$.ajax({ type: "POST",
url: "WebService.asmx/Search", //function that in web service
data: "{txtSearch:'" + $("#txtSearch").val() + "'}",// passing value of txtSearch input
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
//declaer client object and set to it returned result from web sevice function
var result = response.d;
$(".record").html(""); // clear previous result
//looping in 'result' array to get data and fill it inside ".record" div as html
$.each(result, function(index, res) {
//append img tag inside ".record" div
$('<img />', {
src: 'images/' + res.img,
alt: res.Title
}).addClass("img").appendTo('.record');
//append anchor tag inside ".record" div
$('<a></a>', {
href: res.href,
text: res.Title
}).addClass("txtResult").appendTo('.record');
$(".record").append("<hr />");
});
//hide loading div when the data was got
$(".loading").hide();
},
error: function(msg) {
$(".record").html(msg.d);
}
});
}
else {
$(".divResult").hide(); //hide div that contains result when the input text is empty
$(".record").html(""); //also loading text when the input text is empty
}
}
</script>
8- Debug và tận hưởng thành quả đi nào!
Chú ý nhỏ: Các bạn chú ý là cái đoạn:
System.Web.Configuration.WebConfigurationManager.ConnectionStrings["conn"].ConnectionString; là một dòng nhé, mình enter nó xuống để nó khỏi bị vỡ khung ấy mà!
Tags:

Comments[ 0 ]


Đăng nhận xét