Jquery first child (Seçilen elemanı ilk eleman yapmak)

Bir liste elemanını listenin ilk elemanı olarak seçmek istediğimizde aşağıdaki kodları kullanarak bu işin üstesinden kolayca gelebiliriz.

<div class="pr_content">
 <input type="button" id="bir" value="TEST 1" onclick="bir(event)" />
 <input type="button" id="iki" value="TEST 2" onclick="bir(event)" />
 <input type="button" id="uc" value="TEST 3" onclick="bir(event)" />
</div>

////

JavaScript image dropdown

Eski moda dropdownlardan sıkıldıysanız bu yeni image combo box eklentisini deneyin. Her seçeneğe bir icon ekleyebilirsiniz. Eklediğiniz select elemanı ile uyumlu çalışacaktır yada JSON object yaratabilirsiniz. Bu size kalmış. Başlayalım :

ASP.Net ile Jquery  autocomplete yapmak (3)

Son makalemizde css dosyamızı oluşturup, jquery versiyonlarımızı çağırarak autocomplete işlemini sonlandırıyoruz.

Aşağıdaki dosyaları ascx dosyamızın içine ekliyoruz :

<link rel="Stylesheet" href="<%= ResolveUrl ("Styles/jquery-ui-1.10.4.custom.css") %>" />
<script src="<%= ResolveUrl ("Scripts/jquery-1.10.2.js") %>"></script>
<script src="<%= ResolveUrl ("Scripts/jquery-1.11.2.js")%>"></script>

Dosyaların linki : https://www.dropbox.com/sh/32nevb0zuiu23cj/AABOLAFqRdaXIzT-FQoUMWURa?dl=0

Herşey tamamsa aşağıdaki ekran çıktısını göreceksiniz. (Unutmayın üç harften sonra arama başlayacak.)

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

ASP.NET ile Jquery autocomplete yapmak (1)

Bir önceki makalemde asp.net ile autocomplete kullanımını işlemiştim. Dileyen Ajax AutoComplete Extender ile gelişmiş arama linkinden ilgili makaleyi inceleyebilir. Yine aynı konunun devamı olan bir makale daha yazıyorum. Ancak bu sefer Jquery kullanarak ve daha gelişmiş bir arama motoru yapacağız. Daha önce bu işlemi Ajax AutoComplete Extender ile yapmışken şimdi neden tekrar yaptığımı merak edebilirsiniz. Birinci sebebi bu modül daha gelişmiş olacak. Bir web servis kullanacağız.