jQuery autocomplete with callback ajax json을 사용하여 자동 완성

jQuery autocomplete with callback ajax json을 사용하여 자동 완성

서버에서 ajax json 객체 목록을 통해 데이터를 가져오는 콜백 소스와 함께 jQuery autocomplete를 사용하는 방법을 찾고 있습니다.

누가 길 좀 가르쳐 주시겠어요?

검색해 봤지만 완벽한 해결책을 찾을 수 없었어요.

소스코드에 의한 자동완성 문서의 완벽한 예시입니다.

j쿼리

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

복잡한 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
            };
        }));
    }
});

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

Web Method(샘플)WM.aspx):

• 목적:

  • SQL Server Stored Procedure 결과를 캡처하여 JSON 문자열로 AJAX 발신자에게 반환하려면

• 주의:

  • Data.GetDataTableFromSP() - 스토어드 프로시저의 결과에서 DataTable을 반환하는 커스텀 함수입니다.
  • < 시스템.Web.서비스.Web Method(Enable Session: 세션 활성화:=참) > _
  • 퍼블릭 공유 함수 GetAutoCompleteData(ByVal QueryFilterAs 문자열)를 문자열로 지정

---

 //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);
             }                    
        });
     });

---

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

도움이 되었으면 합니다.

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

나는 의 구조를 이용했다.$.each (data [i], function (key, value)그러나 선택 필드의 이름과 양식 요소의 이름을 미리 일치시켜야 합니다.그런 다음 "success" 뒤에 있는 루프에서 "data" 배열의 요소를 자동으로 완성합니다.실행: Ajax 성공과 함께 자동 완성 형식

언급URL : https://stackoverflow.com/questions/9656523/jquery-autocomplete-with-callback-ajax-json