<\/div>\n

Google Suggest yap\u0131s\u0131, Google aramalar\u0131nda bizlere kolayl\u0131k sa\u011flayan, arad\u0131\u011f\u0131m\u0131z de\u011ferlerle ilgili alternatifleri sunan bir yap\u0131d\u0131r.Tabi \u00f6rnek olarak a\u00e7\u0131klaman\u0131n l\u00fczmu olmasada prensib gere\u011fi mant\u0131\u011f\u0131n\u0131 yaz\u0131l\u0131 olarak anlatmak boynumuzun borcu.Arama kutusuna “Ank” de\u011ferlerini girerseniz e\u011fer “Ankara”,”Ankara \u00dcniversitesi” .. vs. gibi de\u011ferlerin listelendi\u011fi a\u015fa\u011f\u0131daki resimdeki gibi bir kutucuk \u00e7\u0131kmaktad\u0131r.
\n $\"\"$ <\/a>
\n\u0130\u015fte Suggest yap\u0131s\u0131n\u0131n k\u0131sa ve \u00f6z anlat\u0131m\u0131 budur.Google Suggest yap\u0131s\u0131 hakk\u0131nda daha \u00e7ok bilgi almak istiyorsan\u0131z buray\u0131<\/a> okuman\u0131z\u0131 tavsiye ederim.
\nBen bu yaz\u0131mda Ajax kontrollerinden bu i\u015flevi ger\u00e7ekle\u015ftirebilen AutoCompleteExtender kontrol\u00fcn\u00fc sizlere tan\u0131taca\u011f\u0131m.
\n
\nAutoCompleteExtender\u00a0kontrol\u00fc, belirtilen TextBox nesnesi i\u00e7ine yaz\u0131lan de\u011ferleri tamamlay\u0131p bizlere kutucuk \u015feklinde geri d\u00f6nd\u00fcren bir kontrold\u00fcr.Tabi bu de\u011ferleri neye g\u00f6re tamamlamaktad\u0131r? diye sorarsan\u0131z e\u011fer, kaynak olarak ne kullan\u0131yorsak e\u011fer(koleksiyon, database vs..), yaz\u0131lan de\u011ferleri kaynaktakilerle belirli \u015fartlardaki sorgulara g\u00f6re kar\u015f\u0131la\u015ft\u0131r\u0131p getirmektedir.Ben bu \u00f6rne\u011fimizde Northwind database \u00fczerinden anlat\u0131m yapaca\u011f\u0131m.<\/p>\n

AutoCompleteExtender\u00a0kontrol\u00fc, ad\u0131ndan da anla\u015f\u0131labilece\u011fi gibi bir Extender kontrol\u00fcd\u00fcr.Yani \u00e7al\u0131\u015fmas\u0131 i\u00e7in ba\u015fka bir kontrole ba\u011flanmas\u0131 \u015fartt\u0131r.Bu kontrol ise AutoCompleteExtender\u00a0i\u00e7in TextBox kontrol\u00fcd\u00fcr.
\nBu kontrol\u00fcn genel anlamdaki i\u015flevi, kullan\u0131c\u0131n\u0131n yazd\u0131\u011f\u0131 belirli karakterden sonraki verinin s\u00fcrekli tetiklenmesidir.Ve her tetikte o verinin tamamlay\u0131c\u0131 s\u0131fatlar\u0131n\u0131, veritab\u0131n\u0131n\u0131 denetleyecek, e\u011fer varsa kutucukta g\u00f6z\u00fckecektir.<\/p>\n

AutoCompleteExtender\u00a0kontrol\u00fc, sunucuda yapaca\u011f\u0131 talepleri bizim olu\u015fturaca\u011f\u0131m\u0131z bir Web Service \u00fczerinden ger\u00e7ekle\u015ftirecektir.Bu Web Service’in i\u00e7inde string dizisi olarak bize sonu\u00e7 d\u00f6nd\u00fcrecek bir Web Method mevcuttur.Burada \u00f6nemli bir nokta ise, TextBox’tan g\u00f6nderilecek de\u011ferler bu Web Metod “prefixText<\/strong>\u00a0” isimli parametresine verilecektir.Bu isim de\u011fi\u015ftirilmemelidir.\u00d6zeldir!!!<\/strong><\/p>\n

\u015eimdi bu kontrol\u00fcn\u00fcn kullan\u0131\u015fl\u0131 \u00f6zelliklerine de\u011finelim sonrada konuyu g\u00fczel bir \u00f6rnekle izah edelim.<\/p>\n

\n
ServicePath<\/strong> : Bu kontrol\u00fcn talepleri ger\u00e7ekle\u015ftirece\u011fi Web Service’in adresi bu \u00f6zelli\u011fe yaz\u0131l\u0131r.<\/li>\n
ServiceMethod<\/strong> : Web Service’deki Web Metodumuzun ismini buraya yazaca\u011f\u0131z.<\/li>\n
BehaviorID<\/strong> : JavaScript fonksiyonlar\u0131 i\u00e7erisindeyken AutoCompleteExtender kontrol\u00fcn\u00fcn i\u00e7eri\u011findeki listeye eri\u015fmemizi sa\u011flayan \u00f6zellik.<\/li>\n
OnClientPopulated<\/strong> : \u0130stemci taraf\u0131nda Web Servicesinden gelen veriler y\u00fcklendi\u011fi esnada tetiklenen olay fonksiyonu.Servisten gelen de\u011ferlerin istenilen formatta listelenmesini sa\u011flar\u0131z.<\/li>\n
OnClientItemSelected<\/strong> : Kutucuktan bir se\u00e7enek se\u00e7ildi\u011fi esnada istemci taraf\u0131ndan tetiklenecek olay fonksiyonu.<\/li>\n
Enabled<\/strong> : \u00c7al\u0131\u015fabilirli\u011fini belirtir. True ya da False<\/li>\n

MinimumPrefixLength<\/strong> :\u00a0Otomatik Tamamlama\u2019nin en az ka\u00e7 karakter ile \u00e7alisagini belirtir.<\/li>\n<\/ul>\n
\u015eimdi ilk i\u015f olarak Web Service’imizi yazal\u0131m.<\/p>\n
Benim olu\u015fturaca\u011f\u0131m \u00f6rnekte, TextBox’umuza yaz\u0131lan de\u011ferler, Northwind veritaban\u0131ndaki Musteriler tablosunda MusteriAdi kolonundaki verilerle kar\u015f\u0131la\u015ft\u0131r\u0131l\u0131p tamamlanacakt\u0131r.
\nWeb Service’imin ad\u0131na “MusterilerService.asmx” koyuyorum.<\/p>\n
\r\n--- MusterilerService.cs ---\r\nusing System;\r\nusing System.Collections.Generic;\r\nusing System.Linq;\r\nusing System.Web;\r\nusing System.Web.Services;\r\nusing System.Data.SqlClient;\r\n\r\n[WebService(Namespace = "http:\/\/tempuri.org\/")]\r\n[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]\r\n\r\n[System.Web.Script.Services.ScriptService]\r\n\/\/Ajax'\u0131n bu Web Service'i kullanabilmesi i\u00e7in bu kodu ekliyoruz.\r\npublic class MusterilerService : System.Web.Services.WebService\r\n{\r\n [WebMethod]\r\n public string[] GetMusteriler(string prefixText)\r\n {\r\n \/\/prefixText ad\u0131ndaki string parametre, geriye string dizisi d\u00f6nen herhangi bir isimde metod olu\u015fturuyoruz.\r\n SqlConnection baglanti = new SqlConnection("Server=Gen\u00e7ay-Gen\u00e7ay;Database=Northwind;Trusted_Connection=True;");\r\n SqlCommand cmd = new SqlCommand("Select MusteriAdi from Musteriler where MusteriAdi like @MusteriAdi + '%' order by MusteriAdi", baglanti);\r\n cmd.Parameters.AddWithValue("@MusteriAdi",prefixText);\r\n baglanti.Open();\r\n SqlDataReader dr = cmd.ExecuteReader();\r\n List<string> MusteriAdlari = new List<string>();\r\n if (dr.HasRows)\r\n {\r\n while (dr.Read())\r\n {\r\n MusteriAdlari.Add(dr["MusteriAdi"].ToString());\r\n }\r\n }\r\n baglanti.Close();\r\n baglanti.Dispose();\r\n cmd.Dispose();\r\n return MusteriAdlari.ToArray();\r\n }\r\n}\r\n<\/pre>\n
Yukar\u0131da olu\u015fturdu\u011fumuz Web Service’i izah edersek e\u011fer, \u00f6zel isim olan “prefixText” parametresine g\u00f6nderilen de\u011ferleri Like sorgusuyla MusteriAdi kolonunda tamaml\u0131yoruz ve gelen sonuclar\u0131 string dizisi olarak geri d\u00f6nd\u00fcr\u00fcyoruz.Buradaki SQL kodlar\u0131n\u0131 biliyorsunuz ve anl\u0131yorsunuz varsay\u0131yorum.Lakin burdaki SQL i\u015flevini anlatmam konuyu farkl\u0131 konulara sapt\u0131raca\u011f\u0131 i\u00e7in kompleksle\u015ftirecektir.<\/p>\n
\u015eimdi s\u0131ra AutoCompleteExtender\u00a0kontrol\u00fcn\u00fc haz\u0131rlamaya geldi.Default.aspx ad\u0131nda bir Web Form a\u00e7\u0131p gerekli i\u015flemleri oradan takip edelim.
\nSayfaya birer tane TextBox, ScriptManager ve AutoCompleteExtender\u00a0nesnesi koyal\u0131m.Sayfan\u0131n Source kodlar\u0131 a\u015fa\u011f\u0131daki gibi olacakt\u0131r.AutoCompleteExtender\u00a0nesnesine a\u015fa\u011f\u0131daki Source kodlar\u0131ndaki gibi yap\u0131land\u0131ral\u0131m.<\/p>\n
\r\n <asp:ScriptManager ID="ScriptManager1" runat="server">\r\n <\/asp:ScriptManager>\r\n <asp:TextBox ID="TextBox1" runat="server" Width="202px"><\/asp:TextBox>\r\n <asp:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server" DelimiterCharacters=""\r\n Enabled="True" ServicePath="MusterilerService.asmx" ServiceMethod="GetMusteriler"\r\n MinimumPrefixLength="1" TargetControlID="TextBox1">\r\n <\/asp:AutoCompleteExtender>\r\n<\/pre>\n
Son olarak projeyi derleyip \u00e7al\u0131\u015ft\u0131ral\u0131m.
\n $\"\"$ <\/a>Umar\u0131m faydalan\u0131rs\u0131n\u0131z..
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Google Suggest yap\u0131s\u0131, Google aramalar\u0131nda bizlere kolayl\u0131k sa\u011flayan, arad\u0131\u011f\u0131m\u0131z de\u011ferlerle ilgili alternatifleri sunan bir yap\u0131d\u0131r.Tabi \u00f6rnek olarak a\u00e7\u0131klaman\u0131n l\u00fczmu olmasada prensib gere\u011fi mant\u0131\u011f\u0131n\u0131 yaz\u0131l\u0131 olarak anlatmak boynumuzun borcu.Arama kutusuna “Ank” de\u011ferlerini girerseniz e\u011fer “Ankara”,”Ankara...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,10,23],"tags":[744,252,253,254],"class_list":["post-823","post","type-post","status-publish","format-standard","hentry","category-ajax","category-asp-net","category-web-tasarim","tag-ajax","tag-autocompleteextender","tag-google","tag-suggest"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=823"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/823\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}