[JQUERY] jQuery를 자동 완성 콜백 AJAX JSON

jQuery를 자동 완성 콜백 AJAX JSON

해결법

1. ---

   1.소스 코드 자동 완성 문서에서 완벽하게 좋은 예.

   소스 코드 자동 완성 문서에서 완벽하게 좋은 예.

   jQuery를

   <script>
     $(function() {
       function log( message ) {
         $( "<div>" ).text( message ).prependTo( "#log" );
         $( "#log" ).scrollTop( 0 );
       }
   
       $( "#city" ).autocomplete({
         source: function( request, response ) {
           $.ajax({
             url: "http://gd.geobytes.com/AutoCompleteCity",
             dataType: "jsonp",
             data: {
               q: request.term
             },
             success: function( data ) {
               response( data );
             }
           });
         },
         minLength: 3,
         select: function( event, ui ) {
           log( ui.item ?
             "Selected: " + ui.item.label :
             "Nothing selected, input was " + this.value);
         },
         open: function() {
           $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
         },
         close: function() {
           $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
         }
       });
     });
   </script>
   

   HTML

   <div class="ui-widget">
     <label for="city">Your city: </label>
     <input id="city">
     Powered by <a href="http://geonames.org">geonames.org</a>
   </div>
   
   <div class="ui-widget" style="margin-top:2em; font-family:Arial">
     Result:
     <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
   </div>
   

2. ---

   2.당신이 복잡한 JSON 개체를 반환하는 경우 다음과 같이 자동 완성 - 당신에게 당신의 성공 기능을 수정해야합니다.

   당신이 복잡한 JSON 개체를 반환하는 경우 다음과 같이 자동 완성 - 당신에게 당신의 성공 기능을 수정해야합니다.

   $.ajax({
       url: "/Employees/SearchEmployees",
       dataType: "json",
       data: {
           searchText: request.term
       },
       success: function (data) {
           response($.map(data.employees, function (item) {
               return {
                   label: item.name,
                   value: item.id
               };
           }));
       }
   });
   

3. ---

   3.내 문제는 최종 사용자가 텍스트 상자에 입력을 시작하고 자동 완성 (ACP) 제안을 수신하고 ACP는 기본적으로 설계되어 제안 선택한 경우 호출 컨트롤을 업데이트했다. 그러나 나는 또한 최종 사용자의 선택에 데이터 특정 여러 다른 컨트롤 (텍스트 상자, 드롭 다운, 등 ...)를 업데이트 할 필요가 있었다. 나는이 문제에 대한 우아한 해결책 알아 내기 위해 노력하고 내가 개발 한 적어도 약간의 시간을 절약 할 희망의 가치를 공유하고 생각합니다.

   내 문제는 최종 사용자가 텍스트 상자에 입력을 시작하고 자동 완성 (ACP) 제안을 수신하고 ACP는 기본적으로 설계되어 제안 선택한 경우 호출 컨트롤을 업데이트했다. 그러나 나는 또한 최종 사용자의 선택에 데이터 특정 여러 다른 컨트롤 (텍스트 상자, 드롭 다운, 등 ...)를 업데이트 할 필요가 있었다. 나는이 문제에 대한 우아한 해결책 알아 내기 위해 노력하고 내가 개발 한 적어도 약간의 시간을 절약 할 희망의 가치를 공유하고 생각합니다.

   의 WebMethod (SampleWM.aspx) :

    //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
   

   자동 완성 jQuery를 (AutoComplete.aspx) :

       $(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);
                }                    
           });
        });
   

4. ---

   4.

   $(document).on('keyup','#search_product',function(){
       $( "#search_product" ).autocomplete({
         source:function(request,response){
                     $.post("<?= base_url('ecommerce/autocomplete') ?>",{'name':$( "#search_product" ).val()}).done(function(data, status){
   
                       response(JSON.parse(data));
           });
         }
       });
   });
   

   PHP 코드 :

   public function autocomplete(){
       $name=$_POST['name'];
       $result=$this->db->select('product_name,sku_code')->like('product_name',$name)->get('product_list')->result_array();
       $names=array();
       foreach($result as $row){
           $names[]=$row['product_name'];
       }
       echo json_encode($names);
   }
   

5. ---

   5.I는 $ .each (데이터의 구조를 사용 [I], 기능 (키 값) 하지만 당신은 폼 요소의 이름으로 선택 필드의 이름을 사전 일치해야합니다. 그리고, "데이터"배열의 "성공"후 루프, 자동 완성 요소이다. 아약스 성공 자동 완성 폼이나요

   I는 $ .each (데이터의 구조를 사용 [I], 기능 (키 값) 하지만 당신은 폼 요소의 이름으로 선택 필드의 이름을 사전 일치해야합니다. 그리고, "데이터"배열의 "성공"후 루프, 자동 완성 요소이다. 아약스 성공 자동 완성 폼이나요

6. ---

   6.이게 도움이 되길 바란다:

   이게 도움이 되길 바란다:

   var token = document.getElementById('token').value;
   var nombre = document.getElementById('txtNombre').value;    
   
   $("#txtNombre").keyup(function () {
       $.ajax({
           type: "POST",
           url: host() + "Formulario/BuscarNombreAutocompletar/",
           data: JSON.stringify({ "nombre": nombre }),
           headers: {
               'Authorization': 'Bearer ' + token
           },
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           success: function (data) {
               var dataArray = [];
               if (controlCarga(data)) {
   
                   $.each(data[1], function (i, item) {
                       dataArray.push(item.frmNombre)
                   });
   
                   $('#txtNombre').autocomplete({
                       clearButton: true,
                       source: dataArray,
                       selectFirst: true,
                       minLength: 2
                   });
               }
           },
           error: function (xhr, textStatus, errorThrown) {
               console.log('Error: ' + xhr.responseText);
           }
       });
   });
   

from https://stackoverflow.com/questions/9656523/jquery-autocomplete-with-callback-ajax-json by cc-by-sa and MIT license