jQuery autocomplete com callback ajax json


90

Estou tentando encontrar uma maneira de usar o autocomplete jQuery com a fonte de retorno de chamada obtendo dados por meio de uma lista de objetos json ajax do servidor.

Alguém poderia dar algumas instruções?

Pesquisei no Google, mas não consegui encontrar uma solução completa.

Respostas:


125

Um exemplo perfeitamente bom na documentação do Autocomplete com código-fonte.

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>

11
este é um exemplo de interface do usuário do jquery.
Rafael Herscovici

Em vez de log (), deve haver console.log ()
RN Kushwaha 09/09/15

4
@RNKushwaha Se você notar, há uma função na parte superior para registrar chamada log.
corsiKa

Não consigo entender como success: function( data ) {response( data );} works inside the ajax call. I mean, what is that response () `funciona? Ele cria alguns <li>elementos de acordo com os dados, mas se eu quiser personalizar esses <li>elementos, o que devo fazer? Eu gostaria de adicionar um par de atributos ...
SagitárioA

2
Estou trabalhando em Rails e meu controlador retorna, format.json {render json: @ products.map (&: name) .to_json}, e tive que remover o tipo de dados: "jsonp" no exemplo acima para fazer isso trabalhar.
franco

19

Se você estiver retornando um objeto json complexo, será necessário modificar a função de sucesso do preenchimento automático da seguinte maneira.

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

Para mim, isso está retornando um resultado vazio. O resultado em si (tabela vazia) é mostrado abaixo da caixa de entrada, mas não há nada dentro.
FrenkyB

10

Meu problema era que os usuários finais começavam a digitar em uma caixa de texto e recebiam sugestões de preenchimento automático (ACP) e atualizavam o controle de chamada se uma sugestão fosse selecionada, já que o ACP é projetado por padrão. No entanto, também precisei atualizar vários outros controles (caixas de texto, DropDowns, etc ...) com dados específicos para a seleção do usuário final. Tenho tentado descobrir uma solução elegante para o problema e acho que vale a pena compartilhar a que desenvolvi e espero que você economize pelo menos algum tempo.

WebMethod (SampleWM.aspx):

  • OBJETIVO:

    • Para capturar os resultados do procedimento armazenado do SQL Server e retorná-los como uma string JSON para o chamador AJAX
  • NOTAS:

    • Data.GetDataTableFromSP () - é uma função personalizada que retorna uma DataTable a partir dos resultados de um procedimento armazenado
    • <System.Web.Services.WebMethod (EnableSession: = True)> _
    • Função pública compartilhada 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):

  • OBJETIVO:
    • Execute a solicitação Ajax para o WebMethod e, em seguida, manipule a resposta

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


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

Código 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);
}

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.