ASP.Net ile Jquery autocomplete yapmak (2)

ASP.Net ile Jquery autocomplete yapmak (2)

Jquery autocomplete içerisinde ajax ile servisin çağrılması

Üç seriden oluşan autocomplete makalemizin ikinci konusu web servisinin jquery autocomplete metodunu kullanaraj ajax ile çağırmak olacaktır. Aşağıda oluşturduğumuz ascx sayfamızda yer alan kodlar ve açıklamalar bulunmaktadır.

ASCX

<script type=”text/javascript” language=”javascript”>

var jQuery  = jQuery.noConflict(); // Diğer jquery fonksiyonlarla çakışmasını önlemek için noConflict metodumuzu çağırıyoruz.

jQuery (function () {

jQuery (“#<%= txtKategoriAdi.ClientID %>”).autocomplete({

// Arama sonuçlarından birine tıklandığında aşağıdaki fonksiyon bir link oluşturup ilgili sayfaya yönlendirecek.

select: function (event, ui) {

var url = “http://ornelsite.com/IlanAra.aspx?KategoriId=” + ui.item.Id;

event.preventDefault();

window.location.href = url;

},

//Web servis çağrıldıktan sonra JSON formatına çeviriliyor ve geriye KategoriId ve KategoriAd döndürülüyor

source: function (request, response) {

jQuery .ajax({

url: “UserControls/CompleteWord.asmx/KategoriAdiAl”,

data: “{ ‘Kelime’: ‘” + request.term + “‘ }”,

dataType: “json”,

type: “POST”,

contentType: “application/json; charset=utf-8”,

success: function (result) {

var markers = JSON.parse(result.d);

response(jQuery .map(markers, function (item) {

var baslik = item.IlanBaslik ? item.IlanBaslik : ‘Kategoriler’;

var kad = item.KategoriAd ? “(Kategori : ” ” + item.KategoriAd + “)” : ‘ ‘;

return {

Id: item.KategoriId,

value: baslik.toUpperCase() + ” ” + kad

}

}))

},

error: function (result) {

alert(“Problem var”);

}

});

},

minLength: 3 // 3 harften sonra autocomplete çalışmaya başlayacak

});

});

</script>

HTML

<asp:TextBox runat=”server” ID=”txtKategoriAdi” placeholder=”Arama yapmak istediğiniz kelimeyi giriniz.” Width=”350px” CssClass=”textbox” Height=”30px”  />

Sormak istediğiniz birşey olursa lütfen yorum olarak giriniz.

Son makale için tıklayınız

Muavenet

Web teknolojilerine merak salmış bir bilgisayar mühendisinin yazıları

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir