Ajax AutoCompleteExtender Kontrolü İle Google Suggest Yapısı

Google Suggest yapısı, Google aramalarında bizlere kolaylık sağlayan, aradığımız değerlerle ilgili alternatifleri sunan bir yapıdır.Tabi örnek olarak açıklamanın lüzmu olmasada prensib gereği mantığını yazılı olarak anlatmak boynumuzun borcu.Arama kutusuna “Ank” değerlerini girerseniz eğer “Ankara”,”Ankara Üniversitesi” .. vs. gibi değerlerin listelendiği aşağıdaki resimdeki gibi bir kutucuk çıkmaktadır.

İşte Suggest yapısının kısa ve öz anlatımı budur.Google Suggest yapısı hakkında daha çok bilgi almak istiyorsanız burayı okumanızı tavsiye ederim.
Ben bu yazımda Ajax kontrollerinden bu işlevi gerçekleştirebilen AutoCompleteExtender kontrolünü sizlere tanıtacağım.

AutoCompleteExtender kontrolü, belirtilen TextBox nesnesi içine yazılan değerleri tamamlayıp bizlere kutucuk şeklinde geri döndüren bir kontroldür.Tabi bu değerleri neye göre tamamlamaktadır? diye sorarsanız eğer, kaynak olarak ne kullanıyorsak eğer(koleksiyon, database vs..), yazılan değerleri kaynaktakilerle belirli şartlardaki sorgulara göre karşılaştırıp getirmektedir.Ben bu örneğimizde Northwind database üzerinden anlatım yapacağım.

AutoCompleteExtender kontrolü, adından da anlaşılabileceği gibi bir Extender kontrolüdür.Yani çalışması için başka bir kontrole bağlanması şarttır.Bu kontrol ise AutoCompleteExtender için TextBox kontrolüdür.
Bu kontrolün genel anlamdaki işlevi, kullanıcının yazdığı belirli karakterden sonraki verinin sürekli tetiklenmesidir.Ve her tetikte o verinin tamamlayıcı sıfatlarını, veritabınını denetleyecek, eğer varsa kutucukta gözükecektir.

AutoCompleteExtender kontrolü, sunucuda yapacağı talepleri bizim oluşturacağımız bir Web Service üzerinden gerçekleştirecektir.Bu Web Service’in içinde string dizisi olarak bize sonuç döndürecek bir Web Method mevcuttur.Burada önemli bir nokta ise, TextBox’tan gönderilecek değerler bu Web Metod “prefixText ” isimli parametresine verilecektir.Bu isim değiştirilmemelidir.Özeldir!!!

Şimdi bu kontrolünün kullanışlı özelliklerine değinelim sonrada konuyu güzel bir örnekle izah edelim.

• ServicePath : Bu kontrolün talepleri gerçekleştireceği Web Service’in adresi bu özelliğe yazılır.
• ServiceMethod : Web Service’deki Web Metodumuzun ismini buraya yazacağız.
• BehaviorID : JavaScript fonksiyonları içerisindeyken AutoCompleteExtender kontrolünün içeriğindeki listeye erişmemizi sağlayan özellik.
• OnClientPopulated : İstemci tarafında Web Servicesinden gelen veriler yüklendiği esnada tetiklenen olay fonksiyonu.Servisten gelen değerlerin istenilen formatta listelenmesini sağlarız.
• OnClientItemSelected : Kutucuktan bir seçenek seçildiği esnada istemci tarafından tetiklenecek olay fonksiyonu.
• Enabled : Çalışabilirliğini belirtir. True ya da False
• MinimumPrefixLength : Otomatik Tamamlama’nin en az kaç karakter ile çalisagini belirtir.

Şimdi ilk iş olarak Web Service’imizi yazalım.

Benim oluşturacağım örnekte, TextBox’umuza yazılan değerler, Northwind veritabanındaki Musteriler tablosunda MusteriAdi kolonundaki verilerle karşılaştırılıp tamamlanacaktır.
Web Service’imin adına “MusterilerService.asmx” koyuyorum.

--- MusterilerService.cs ---
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]
//Ajax'ın bu Web Service'i kullanabilmesi için bu kodu ekliyoruz.
public class MusterilerService : System.Web.Services.WebService
{
    [WebMethod]
    public string[] GetMusteriler(string prefixText)
    {
        //prefixText adındaki string parametre, geriye string dizisi dönen herhangi bir isimde metod oluşturuyoruz.
        SqlConnection baglanti = new SqlConnection("Server=Gençay-Gençay;Database=Northwind;Trusted_Connection=True;");
        SqlCommand cmd = new SqlCommand("Select MusteriAdi from Musteriler where MusteriAdi like @MusteriAdi + '%' order by MusteriAdi", baglanti);
        cmd.Parameters.AddWithValue("@MusteriAdi",prefixText);
        baglanti.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        List<string> MusteriAdlari = new List<string>();
        if (dr.HasRows)
        {
            while (dr.Read())
            {
                MusteriAdlari.Add(dr["MusteriAdi"].ToString());
            }
        }
        baglanti.Close();
        baglanti.Dispose();
        cmd.Dispose();
        return MusteriAdlari.ToArray();
    }
}

Yukarıda oluşturduğumuz Web Service’i izah edersek eğer, özel isim olan “prefixText” parametresine gönderilen değerleri Like sorgusuyla MusteriAdi kolonunda tamamlıyoruz ve gelen sonucları string dizisi olarak geri döndürüyoruz.Buradaki SQL kodlarını biliyorsunuz ve anlıyorsunuz varsayıyorum.Lakin burdaki SQL işlevini anlatmam konuyu farklı konulara saptıracağı için kompleksleştirecektir.

Şimdi sıra AutoCompleteExtender kontrolünü hazırlamaya geldi.Default.aspx adında bir Web Form açıp gerekli işlemleri oradan takip edelim.
Sayfaya birer tane TextBox, ScriptManager ve AutoCompleteExtender nesnesi koyalım.Sayfanın Source kodları aşağıdaki gibi olacaktır.AutoCompleteExtender nesnesine aşağıdaki Source kodlarındaki gibi yapılandıralım.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:TextBox ID="TextBox1" runat="server" Width="202px"></asp:TextBox>
    <asp:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" DelimiterCharacters=""
        Enabled="True" ServicePath="MusterilerService.asmx" ServiceMethod="GetMusteriler"
        MinimumPrefixLength="1" TargetControlID="TextBox1">
    </asp:AutoCompleteExtender>

Son olarak projeyi derleyip çalıştıralım.
Umarım faydalanırsınız..
İyi çalışmalar…