Realizar o Autocomplete por aproximação w3schools

[Marcos PP 0]

Estou utilizando a Autocomplete do w3schools, porem surgiu a necessidade de buscar por aproximação

Exemplo Se digito bar ele me retorna Barbados

Porem, necessito que alem de retornar Barbados ele também me retorne Antigua & Barbuda pois aqui tambem contem as letras bar

Existe alguma forma de adaptar este codigo para que funcione assim ?

[quimera 13]

A melhor maneira seria usando ajax, você teria uma gama de opções.

 

$("input[name='termo']").keypress(function(){

        var termo = $(this).val()

        if(termo.length >= 3){

            $.post("./pagina.php", {termo: termo}, function(lista){

                $("div.seguraaspalavras").html(lista);

            });

        }

    });

[Jack Oliveira 1]

Em 12/05/2020 at 10:57, Marcos PP disse:

Estou utilizando a Autocomplete do w3schools, porem surgiu a necessidade de buscar por aproximação

Exemplo Se digito bar ele me retorna Barbados

Porem, necessito que alem de retornar Barbados ele também me retorne Antigua & Barbuda pois aqui tambem contem as letras bar

Existe alguma forma de adaptar este codigo para que funcione assim ?

EXEMPLO 1

Para capturar os resultados do Procedimento Armazenado do SQL Server e retorná-los como uma Cadeia de Caracteres JSON ao Chamador AJAX

 

Data.GetDataTableFromSP () - é uma função personalizada que retorna um DataTable dos resultados de um Procedimento Armazenado <System.Web.Services.WebMethod (EnableSession: = True)>  Função pública compartilhada GetAutoCompleteData (ByVal QueryFilterAs String) As String

 

// Chame a função personalizada para retornar resultados do SP como uma DataTable
 // DataTable consistirá em Campo0 - Campo5
 
 Dim params As ArrayList = New ArrayList
 params.Add("@QueryFilter|" & QueryFilter)
 Dim dt As DataTable = Data.GetDataTableFromSP("AutoComplete", params, [ConnStr])

 // Crie um Obj StringBuilder para armazenar o 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

 // Faz um loop da DataTable e converte a linha em 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

   // Retorna JSON para o WebMethod Caller
    Return jStr.ToString

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

                            //valores padrão de preenchimento automático REQUIRED
                            AC.label = item.Field0;
                            AC.value = item.Field1;

                            //estender valores
                            AC.Nome = item.Field2;
                            AC.SobreNome = item.Field3;
                            AC.Idade = item.Field4;
                            AC.Telefone = item.Field5;

                            return AC
                        }));       
                    }                                             
                });
            },
            minLength: 3,
            select: function (event, ui) {                    
                $("#txtNome").val(ui.item.Nome);
                $("#txtSobreNome").val(ui.item.SobreNome);
                $("#ddlIdade").val(ui.item.Idade);
                $("#txtTelefone").val(ui.item.Telefone);
             }                    
        });
     });

EXEMPLO 2

 

Exemplo perfeitamente bom nos documentos de preenchimento  Autocomplete  com código fonte.

 

<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 ?
          "Selecionado: " + ui.item.label :
          "Nada selecionado, a entrada foi " + 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">Sua cidade: </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">
  Resultado:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

 

Qualquer coisa de uma olhada nestes LINK´S

 

LINK1     LINK2

 

Espero que possa lhe ajudar da melhor forma