Asp.net Jquery AutoComplete Otomatik Tamamlama
//Arama TextBox
<asp:TextBox ID="txtArama" runat="server" CssClass="arama" autocomplete="off"></asp:TextBox>
//Kullanılan js ve css
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link href="js/jquery-ui.min.css" rel="stylesheet" />
//JavaScript
<script type="text/javascript">
$(document).ready(function () {
$("#<%=txtArama.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: 'WebAra.aspx/UrunGetir',
data: "{ 'arananKelime': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
//alert(response.responseText);
},
failure: function (response) {
//alert(response.responseText);
}
});
},
select: function (event, ui) {
var gidilecekItemUrl = ui.item.val;
window.location.href = 'Urun.aspx?' + gidilecekItemUrl;
},
minLength: 1
});
});
</script>
//WebAra.aspx
[WebMethod(EnableSession = true)] //webmethod içinde session kullanmak gerekirse (EnableSession = true)
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string[] UrunGetir(string arananKelime)
{
List<string> urunler = new List<string>();
//HttpContext.Current.Session["VERITABANI_ADI"].ToString() //WebMethod içinde Session kullanımı
//arananKelime sorguda ilgili yere
//DataTable dt = ...
//DataRow dr = ...
string urunUrl = "kategoriId=" + dr["KategoriId"].ToString() + "&urunId=" + dr["UrunId"].ToString();
string urunAd = dr["UrunAd"].ToString();
urunler.Add(string.Format("{0}-{1}", urunAd, urunUrl));
return urunler.ToArray();
}
