Asp.Net Autocomplete nasıl yapılır?

tarihinde gönderilmiş tarafından

jquery-autocompleteAsp.net ile sayfalarımızı tasarlarken bazen öyle bir an gelir ki kullanıcının binlerce bilgi arasında arama yaparak oradaki bir kodu ekrana yazmasını isteyebiliriz ama bu işlem ne mümkün olabilir ne de kullanıcılara mantıklı gelebilir.

Bu tip durumlarda sayfamızdaki textbox alanlarına AUTOCOMPLETE özelliği vererek kullanıcının istenen bilginin bir kısmını yazması ile istenen bilgiyi açılan listeden seçebilmesi sağlanır.

Böylece hem girdilerin standarda uygun yazılması sağlanır, hem de hata oranı azaltılmış olur.

Peki ama bu autocomplete işlemi nasıl yapılır.

Öncelikli olarak sayfamızın header bölümüne Jquery kütüphaneleri eklenir.

<link href="Scripts/autocomplete/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="Scripts/autocomplete/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/autocomplete/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=txt_tamamla.ClientID%>").autocomplete('/Includes/Search/tamamlayici.ashx');
});
</script>

 

daha sonra sayfamızın body kısmında ilgili textbox nesnemizi gereken yere ekleriz.

<asp:TextBox ID="txt_tamamla" runat="server" Width="99%" TextMode="MultiLine" Enabled="False" ></asp:TextBox>

 

bu eklememizi de yaptıktan sonra sıra geldi gelen sorgu cümleciklerini değerlendirip veritabanından sorgu yapacak olan tamamlayici.ashx dosyamızı hazırlamaya

<%@ WebHandler Language="VB" Class="nace"%>

Imports System
Imports System.Web
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Text
Public Class nace : Implements IHttpHandler

Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
Dim prefixText As String = filtered(context.Request.QueryString("q"))
Dim conn As SqlConnection = New SqlConnection
conn.ConnectionString = ConfigurationManager _
.ConnectionStrings("samsuntsofirmalar").ConnectionString
Dim cmd As SqlCommand = New SqlCommand
cmd.CommandText = String.Format("select id,kod from TBL_bilgi where kod like '__{0}%'", prefixText)
cmd.Connection = conn
Dim sb As StringBuilder = New StringBuilder
conn.Open()
Dim sdr As SqlDataReader = cmd.ExecuteReader
While sdr.Read
sb.Append(sdr("id") & "-" & sdr("kod")) _
.Append(Environment.NewLine)
End While
conn.Close()
context.Response.Write(sb.ToString)
End Sub

Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property

End Class

 

 

işte bu kadar …

Css ve Jquery Kütüphanes için: NetAutoCompleteScript

 

Loading