[jquery] 콜백 Ajax JSON을 사용한 jQuery 자동 완성

내 문제는 최종 사용자가 텍스트 상자에 입력을 시작하고 자동 완성 (ACP) 제안을 받고 ACP가 기본적으로 설계되어 제안이 선택되면 호출 제어를 업데이트한다는 것입니다. 그러나 최종 사용자의 선택과 관련된 데이터로 여러 다른 컨트롤 (텍스트 상자, 드롭 다운 등)을 업데이트해야했습니다. 나는 문제에 대한 우아한 해결책을 찾으려고 노력해 왔으며 내가 개발 한 것이 공유 할 가치가 있다고 생각하며 적어도 시간을 절약 할 수 있기를 바랍니다.

WebMethod (SampleWM.aspx) :

• 목적:

  • SQL Server 저장 프로 시저 결과를 캡처하고 AJAX 호출자에게 JSON 문자열로 반환하려면

• 메모:

  • Data.GetDataTableFromSP ()-저장 프로 시저의 결과에서 DataTable을 반환하는 사용자 지정 함수입니다.
  • <System.Web.Services.WebMethod (EnableSession : = True)> _
  • 공용 공유 함수 GetAutoCompleteData (ByVal QueryFilterAs String) As String

 //Call to custom function to return SP results as a DataTable
 // DataTable will consist of Field0 - Field5
 Dim params As ArrayList = New ArrayList
 params.Add("@QueryFilter|" & QueryFilter)
 Dim dt As DataTable = Data.GetDataTableFromSP("AutoComplete", params, [ConnStr])

 //Create a StringBuilder Obj to hold the JSON
 //IE: [{"Field0":"0","Field1":"Test","Field2":"Jason","Field3":"Smith","Field4":"32","Field5":"888-555-1212"},{"Field0":"1","Field1":"Test2","Field2":"Jane","Field3":"Doe","Field4":"25","Field5":"888-555-1414"}]
 Dim jStr As StringBuilder = New StringBuilder

 //Loop the DataTable and convert row into JSON String
 If dt.Rows.Count > 0 Then
      jStr.Append("[")
      Dim RowCnt As Integer = 1
      For Each r As DataRow In dt.Rows
           jStr.Append("{")
           Dim ColCnt As Integer = 0
           For Each c As DataColumn In dt.Columns
               If ColCnt = 0 Then
                   jStr.Append("""" & c.ColumnName & """:""" & r(c.ColumnName) & """")
               Else
                   jStr.Append(",""" & c.ColumnName & """:""" & r(c.ColumnName) & """")
                End If
                ColCnt += 1
            Next

            If Not RowCnt = dt.Rows.Count Then
                jStr.Append("},")
            Else
                jStr.Append("}")
            End If

            RowCnt += 1
        Next

        jStr.Append("]")
    End If

    //Return JSON to WebMethod Caller
    Return jStr.ToString

AutoComplete jQuery (AutoComplete.aspx) :

• 목적:
  • WebMethod에 Ajax 요청을 수행 한 다음 응답을 처리합니다.

    $(function() {
      $("#LookUp").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "SampleWM.aspx/GetAutoCompleteData",
                    dataType: "json",
                    data:'{QueryFilter: "' + request.term  + '"}',
                    success: function (data) {
                        response($.map($.parseJSON(data.d), function (item) {
                            var AC = new Object();

                            //autocomplete default values REQUIRED
                            AC.label = item.Field0;
                            AC.value = item.Field1;

                            //extend values
                            AC.FirstName = item.Field2;
                            AC.LastName = item.Field3;
                            AC.Age = item.Field4;
                            AC.Phone = item.Field5;

                            return AC
                        }));
                    }
                });
            },
            minLength: 3,
            select: function (event, ui) {
                $("#txtFirstName").val(ui.item.FirstName);
                $("#txtLastName").val(ui.item.LastName);
                $("#ddlAge").val(ui.item.Age);
                $("#txtPhone").val(ui.item.Phone);
             }
        });
     });