Jquery ile hızlı arama ( AutoComplete ) Yapımı

Anasayfa / Asp.net / 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ı

<!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" type="text" />
<script language="javascript">
$('#ctl00$header_arama_txt').on('input', function (e) {
$.ajax({
type: 'GET',
url: '/ziyaret_musteri_arama.aspx?q=' + document.getElementById('z_musteri_txt').value,
success: function (cevap) {
$('div#hizli_arama_sonuc').html(cevap);
}
});
}); 
</script>
</form>
<div id="hizli_arama_sonuc"></div>
</div>
</form>
</body>
</html>

<!DOCTYPE html>

</head>

<body>

<div>

$('#ctl00$header_arama_txt').on('input', function (e) {

$.ajax({

type: 'GET',

url: '/ziyaret_musteri_arama.aspx?q=' + document.getElementById('z_musteri_txt').value,

success: function (cevap) {

$('div#hizli_arama_sonuc').html(cevap);

}

});

</script>

</form>

</div>

</form>

</body>

</html>

header_hizli_arama.aspx kaynak kodları

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();

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)

{