afg_javan
شنبه 23 اردیبهشت 1391, 19:36 عصر
سلام دوستان
الان من می خوام یک برنامه جستجو اتوکمپلیت توسط جی کوئری آماده کنم. با خودم فکر کردم اگه مراحل کار رو اینجا بزارم خوبه و شاید گره از کار دوستانی که به فکر بهینه سازی وبسایت خود هستند باز کند.
خب بریم شروع کنیم
خب در قدم اول ما به یک تکست باکس و حداقل یک جدول درون دیتابیس و از همه مهمتر یک صفحه وب :لبخند: نیازمندیم.
من یک صفحه با نام search.aspx درون برنامه ام ایجاد و داخل اون یک تکست باکس با آیدی jostejoo و سی اس اس کلاس jostejoo_css ایجاد می کنم.(مانند نمونه زیر)
<asp:TextBox ClientIDMode="Static" ID="jostejoo" CssClass="jostejoo_css" runat="server"></asp:TextBox>
اگه دوستان توجه کرده باشند من clientidmode رو استاتیک گذاشتم و دلیل اونم اینه که اولا می تونم ساده تر با جی کوئری کار کنم ثانیا حجم کد html ام کم می شه . (برای من یک کیلوبایت هم یک کیلوبایته :لبخند:)
خب الان می رم کد بیهایند صفحه و نیم اسپیس های زیر رو اضافه می کنم.
using System.Data.SqlClient;
using System.Web.Services;
namespace اول برای اضافه شدن آبجکت های کار با دیتابیس و namespace دوم هم برای خواندن دیتا توسط وب سرویس
حالا یک تابع به صورت زیر ایجاد می کنم.
[WebMethod]
public static List<string> getauto(string name)
{
List<string> result = new List<string>();
using (SqlConnection con = new SqlConnection("Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=afg_javan;Data Source=."))
{
using (SqlCommand com = new SqlCommand("select distinct name from [users] where name like '%'+@search+'%'", con))
{
con.Open();
com.Parameters.AddWithValue("@search", name);
SqlDataReader dr = com.ExecuteReader();
while (dr.Read())
{
result.Add(dr["name"].ToString());
}
return result;
}
}
}
خب الان می رم صفحه aspx خودم و جی کوئری و جی کوئری ui رو به صفحه ام اضافه می کنم که البته در اکثر وبسایتها از این کتابخانه استفاده می شود.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"></script>
بعد از انجام اینکار کد جاوا اسکریپت زیر رو به صفحه ام اضافه می کنم
<script type="text/javascript">
$(document).ready(function () {
SearchText();
});
function SearchText() {
$(".jostejoo_css").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "search.aspx/getauto",
data: "{'name':'" + document.getElementById('jostejoo').value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("متاسفانه برنامه با مشکل روبرو است");
}
});
}
});
}
</script>
کار تمام است.
این آموزش به درخواست یکی از دوستان گذاشته شده است که مایل بود از کامپونت ajaxcontroltoolkit برای autocomplate استفاده کند که من توصیه کردم به علت حجم بالای تولید کد توسط این کامپونت از اون استفاده نکنه بهتره!
برای اطلاعات بیشتر می تونید به لینک زیر بروید
برنامه نویس (http://barnamenevis.org/showthread.php?327229-%DA%A9%D9%86%D8%AA%D8%B1%D9%84-ajaxToolkit-AutoCompleteExtender&p=1502642#post1502642)
پروژه رو نتونستم ضمیمه کنم به علت حجم زیاد
اما تو آدرس زیر آپلود کردم
آدرس دانلود (http://uplod.ir/8zyh021ma6a1/search_autocomplate.zip.htm)
الان من می خوام یک برنامه جستجو اتوکمپلیت توسط جی کوئری آماده کنم. با خودم فکر کردم اگه مراحل کار رو اینجا بزارم خوبه و شاید گره از کار دوستانی که به فکر بهینه سازی وبسایت خود هستند باز کند.
خب بریم شروع کنیم
خب در قدم اول ما به یک تکست باکس و حداقل یک جدول درون دیتابیس و از همه مهمتر یک صفحه وب :لبخند: نیازمندیم.
من یک صفحه با نام search.aspx درون برنامه ام ایجاد و داخل اون یک تکست باکس با آیدی jostejoo و سی اس اس کلاس jostejoo_css ایجاد می کنم.(مانند نمونه زیر)
<asp:TextBox ClientIDMode="Static" ID="jostejoo" CssClass="jostejoo_css" runat="server"></asp:TextBox>
اگه دوستان توجه کرده باشند من clientidmode رو استاتیک گذاشتم و دلیل اونم اینه که اولا می تونم ساده تر با جی کوئری کار کنم ثانیا حجم کد html ام کم می شه . (برای من یک کیلوبایت هم یک کیلوبایته :لبخند:)
خب الان می رم کد بیهایند صفحه و نیم اسپیس های زیر رو اضافه می کنم.
using System.Data.SqlClient;
using System.Web.Services;
namespace اول برای اضافه شدن آبجکت های کار با دیتابیس و namespace دوم هم برای خواندن دیتا توسط وب سرویس
حالا یک تابع به صورت زیر ایجاد می کنم.
[WebMethod]
public static List<string> getauto(string name)
{
List<string> result = new List<string>();
using (SqlConnection con = new SqlConnection("Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=afg_javan;Data Source=."))
{
using (SqlCommand com = new SqlCommand("select distinct name from [users] where name like '%'+@search+'%'", con))
{
con.Open();
com.Parameters.AddWithValue("@search", name);
SqlDataReader dr = com.ExecuteReader();
while (dr.Read())
{
result.Add(dr["name"].ToString());
}
return result;
}
}
}
خب الان می رم صفحه aspx خودم و جی کوئری و جی کوئری ui رو به صفحه ام اضافه می کنم که البته در اکثر وبسایتها از این کتابخانه استفاده می شود.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"></script>
بعد از انجام اینکار کد جاوا اسکریپت زیر رو به صفحه ام اضافه می کنم
<script type="text/javascript">
$(document).ready(function () {
SearchText();
});
function SearchText() {
$(".jostejoo_css").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "search.aspx/getauto",
data: "{'name':'" + document.getElementById('jostejoo').value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("متاسفانه برنامه با مشکل روبرو است");
}
});
}
});
}
</script>
کار تمام است.
این آموزش به درخواست یکی از دوستان گذاشته شده است که مایل بود از کامپونت ajaxcontroltoolkit برای autocomplate استفاده کند که من توصیه کردم به علت حجم بالای تولید کد توسط این کامپونت از اون استفاده نکنه بهتره!
برای اطلاعات بیشتر می تونید به لینک زیر بروید
برنامه نویس (http://barnamenevis.org/showthread.php?327229-%DA%A9%D9%86%D8%AA%D8%B1%D9%84-ajaxToolkit-AutoCompleteExtender&p=1502642#post1502642)
پروژه رو نتونستم ضمیمه کنم به علت حجم زیاد
اما تو آدرس زیر آپلود کردم
آدرس دانلود (http://uplod.ir/8zyh021ma6a1/search_autocomplate.zip.htm)