Jquery ile hızlı arama ( AutoComplete ) Yapımı
8 Ekim 2020 / 14:52
Burak
Merhabalar,
Hızlı arama yapmak isterseniz aşağıdaki kodları kullanabilirsiniz.
Html tarafı
|
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 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <script src="/js/jquery.min.js"></script> <form id="hizli_arama_form" name="hizli_arama_form" > <input name="ctl00$header_arama_txt" id="ctl00$header_arama_txt" onkeydown="hizli_arama();" onkeypress="hizli_arama();" onkeyup="hizli_arama();" type="text" /> <script language="javascript"> function hizli_arama() { $.ajax({ type: 'GET', url: '/header_hizli_arama.aspx?q=' + document.getElementById('ctl00$header_arama_txt').value, success: function (cevap) { $('div#hizli_arama_sonuc').html(cevap); } }); } </script> </form> <div id="hizli_arama_sonuc"></div> </div> </form> </body> </html> |
header_hizli_arama.aspx kaynak kodları
|
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 |
Response.Clear(); try { string arama = Request.QueryString["q"]; if (arama != "" && arama.Length > 2) { using (baglanti = new MySqlConnection(bag)) { baglanti.Open(); using (MySqlCommand t = new MySqlCommand("SELECT ad,resim1,isapi FROM eticaret_urunler where stok>1 and online='1' and CONCAT(ad,kod) LIKE ?arama limit 10", baglanti)) { t.Parameters.Add("arama", "%" + arama + "%"); using (MySqlDataReader a = t.ExecuteReader()) { while (a.Read()) { Response.Write("<div class='hizli_arama_header'><a href='/urun/" + a["isapi"].ToString() + "'><div style='display:table;'><div style='display:table-row;'> <div style='display:table-cell;'><img src='/uploads/eticaret/180/" + a["resim1"].ToString() + "' height='50' width='50'></div><div style='display:table-cell; vertical-align: middle;'>" + a["ad"].ToString() + "</div></div></div></a></div>"); } a.Close(); a.Dispose(); } } baglanti.Close(); baglanti.Dispose(); } } } catch(Exception exp) { Response.Write("<div class='hizli_arama_header'>" + exp.Message + "</div>"); } Response.End(); |
Bir sonraki kodlama yazısından görüşünceye kadar bol sorgulu günler 🙂
Etiketler: Asp.net autocomplete, asp.net jquery autocomplete
Bu Yazılarıda Okuyabilirsiniz...
Bir cevap yazın