jQuery Autocomplete using Web Service in ASP.Net

地址1:http://www.aspsnippets.com/Articles/Implement-jQuery-Autocomplete-using-Web-Service-in-ASP.Net.aspx

地址2:http://forums.asp.net/t/1904450.aspx

地址3:http://www.dotnetcurry.com/showarticle.aspx?ID=515

地址4:http://www.365mini.com/page/jquery-ui-autocomplete.htm

Using jQuery autocomplete Plugin in ASP.Net

 

Connection String

 

Below is the connection string to the database which I have placed in the web.config.

< connectionStrings >

    < add name =" constr" connectionString =" Data Source = .\SQL2005;       

       Initial Catalog = Northwind; Integrated Security = true" />

</ connectionStrings >

 

Building the Web Service

Below is the code for the web service which will handle the jQuery Autocomplete calls and will return the matching records from the Customers table of the Northwind database.

The select query gets the Name and the ID of the customer that matches the prefix text.

The fetched records are processed and the Key Value Pair is created by appending the Id to the Name field in the following format  {0}-{1} where is the Name  {0}and  {1} is the ID.

C#

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.Services;

using System.Data.SqlClient;

using System.Configuration;

using System.Web.Script.Services;

 

/// <summary>

///  Summary description for Service

/// </summary>

[ WebService(Namespace =  "http://tempuri.org/")]

[ WebServiceBinding(ConformsTo =  WsiProfiles.BasicProfile1_1)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

[System.Web.Script.Services. ScriptService]

public  class  Service : System.Web.Services. WebService {

 

     public Service () {

 

         //Uncomment the following line if using designed components

         //InitializeComponent();

    }

 

    [ WebMethod]

    [ ScriptMethod(ResponseFormat =  ResponseFormat.Json)]

     public  string[] GetCustomers( string prefix)

    {

         List< string> customers =  new  List< string>();

         using ( SqlConnection conn =  new  SqlConnection())

        {

            conn.ConnectionString =  ConfigurationManager

                    .ConnectionStrings[ "constr"].ConnectionString;

             using ( SqlCommand cmd =  new  SqlCommand())

            {

                cmd.CommandText =  "select ContactName, CustomerId from Customers where " +

                 "ContactName like @SearchText + '%'";

                cmd.Parameters.AddWithValue( "@SearchText", prefix);

                cmd.Connection = conn;

                conn.Open();

                 using ( SqlDataReader sdr = cmd.ExecuteReader())

                {

                     while (sdr.Read())

                    {

                        customers.Add( string.Format( "{0}-{1}", sdr[ "ContactName"], sdr[ "CustomerId"]));

                    }

                }

                conn.Close();

            }

             return customers.ToArray();

        }

    }

}

 

VB.Net

Imports System.Web

Imports System.Web.Services

Imports System.Web.Services.Protocols

Imports System.Web.Script.Services

Imports System.Data.SqlClient

Imports System.Collections.Generic

 

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

' <System.Web.Script.Services.ScriptService()> _

< WebService(Namespace:= "http://tempuri.org/")> _

< WebServiceBinding(ConformsTo:= WsiProfiles.BasicProfile1_1)> _

< Global.Microsoft.VisualBasic.CompilerServices. DesignerGenerated()> _

< ScriptService()> _

Public  Class  Service

     Inherits System.Web.Services. WebService

 

    < WebMethod()> _

    < ScriptMethod(ResponseFormat:= ResponseFormat.Json)> _

     Public  Function GetCustomers( ByVal prefix  As  String)  As  String()

         Dim customers  As  New  List( Of  String)()

         Using conn  As  New  SqlConnection()

            conn.ConnectionString =  ConfigurationManager.ConnectionStrings( "constr").ConnectionString

             Using cmd  As  New  SqlCommand()

                cmd.CommandText =  "select ContactName, CustomerId from Customers where " &  "ContactName like @SearchText + '%'"

                cmd.Parameters.AddWithValue( "@SearchText", prefix)

                cmd.Connection = conn

                conn.Open()

                 Using sdr  As  SqlDataReader = cmd.ExecuteReader()

                     While sdr.Read()

                        customers.Add( String.Format( "{0}-{1}", sdr( "ContactName"), sdr( "CustomerId")))

                     End  While

                 End  Using

                conn.Close()

             End  Using

             Return customers.ToArray()

         End  Using

     End  Function

End  Class

 

Client Side Implementation

Populating the Autocomplete list

In the client side implementation the data received from the server is processed in the success event handler. A loop is executed for each received item in the list of items and then an object with text part in the  label property and value part in the  val property is returned.

 

Storing the Value part when item is selected

In the select event handler of the jQuery Autocomplete I am storing the value (Here Customer ID) in the  hfCustomerId Hidden Field so that it can be fetched server side.

< html  xmlns ="http://www.w3.org/1999/xhtml">

< head  id ="Head1"  runat ="server">

< title ></ title >

< script  src ="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"

type  =  "text/javascript"></ script >

< script  src ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"

type  =  "text/javascript"></ script >

< link  href ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"

rel  =  "Stylesheet"  type ="text/css"  />

< script  type ="text/javascript">

    $(document).ready( function () {

        $( "#<%=txtSearch.ClientID %>").autocomplete({

            source:  function (request, response) {

                $.ajax({

                    url:  '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',

                    data:  "{ 'prefix': '" + request.term +  "'}",

                    dataType:  "json",

                    type:  "POST",

                    contentType:  "application/json; charset=utf-8",

                    success:  function (data) {

                        response($.map(data.d,  function (item) {

                             return {

                                label: item.split( '-')[0],

                                val: item.split( '-')[1]

                            }

                        }))

                    },

                    error:  function (response) {

                        alert(response.responseText);

                    },

                    failure:  function (response) {

                        alert(response.responseText);

                    }

                });

            },

            select:  function (e, i) {

                $( "#<%=hfCustomerId.ClientID %>").val(i.item.val);

            },

            minLength: 1

        });

    });

</ script >

</ head >

< body >

     < form  id ="form1"  runat ="server">

     < asp : TextBox  ID ="txtSearch"  runat ="server"></ asp : TextBox >

     < asp : HiddenField  ID ="hfCustomerId"  runat ="server"  />

     < br  />

     < asp : Button  ID ="btnSubmit"  runat ="server"  Text ="Submit"  OnClick  =  "Submit"  />

     </ form >

</ body >

</ html >

 

Fetching the Selected Item Key and Value server side

The Key (Here Customer Name) and Value (Here Customer ID) can be fetched server side on click of submit button in the following way

C#

protected  void Submit( object sender,  EventArgs e)

{

     string customerName = Request.Form[txtSearch.UniqueID];

     string customerId = Request.Form[hfCustomerId.UniqueID];

}

 

VB.Net

Protected  Sub Submit( ByVal sender  As  Object,  ByVal e  As System. EventArgs)

    Dim customerName  As  String = Request.Form(txtSearch.UniqueID)

   Dim customerId  As  String = Request.Form(hfCustomerId.UniqueID)

End  Sub

 

Screenshots

Working of the jQuery Autocomplete using Web Services

Fetching the Key and Value of the selected Autocomplete Item

The above code has been tested in the following browsers

         

* All browser logos displayed above are property of their respective owners.

按照上边例子调试会有一个报错

只能从脚本中调用在类定义上有[ScriptService]属性的 Web 服务问题的解决方法

jQuery.ajax( options )

有很多选项，介绍其中的几个：

·dataType：想从服务器得到哪种类型的数据。xml,html,script,json,jsonp,text

·success：请求成功后的处理函数

·type：以POST或GET的方式请求。默认GET。PUT和DELETE也可以用，但并不是所有的浏览器都支持

·url：请求的目的地址，须是一个字符串。

·complete：不管请求成功还是错误，只要请求完成，可以执行的事件。

·beforeSend：传递异步请求之前的事件。

·contentType：不能为空，

·data：传递参数，即使data为空，也要带空参数

注【在.net3.5中，访问web服务，要对web服务添加修饰：[System.Web.Script.Services.ScriptService] 否则，当.ajax()请求服务时，会有异常：只能从脚本中调用在类定义上有[ScriptService]属性的 Web 服务】

ajax调用webService：CS代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14

[WebService(Namespace = "http://tempuri.org/" )] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] //若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 [System.Web.Script.Services.ScriptService] public  class  WebService : System.Web.Services.WebService {      public  WebService () {          //如果使用设计的组件，请取消注释以下行          //InitializeComponent();      }      [WebMethod]      public  string  HelloWorld() {          return  "Hello World" ;      } }

js代码：

+ View Code

出处 ： http://www.cnblogs.com/nianming/

另外,jquery UI 地址:http://jqueryui.com/