after - jQuery Autocompleta usando extraParams para pasar variables GET adicionales

jquery autocomplete source

Question

Me refiero específicamente al complemento jQuery Autocomplete v1.1 por Jörn Zaefferer [fuente: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/] ya que parece haber algunas variaciones de este complemento.

Estoy tratando de pasar parámetros adicionales al servidor cuando el usuario comienza a escribir porque tengo varios campos para los que quiero completar automáticamente las sugerencias.

Además de la consulta, quiero enviar el atributo de nombre de entrada al servidor, pero parece que no puedo usar $ (this) .attr (''nombre'') dentro de los paquetes extra.

Mi jQuery:

   $(''.ajax-auto input'').autocomplete(''search.php'', {
     extraParams: {
      search_type: function(){
       return $(this).attr(''name'');
      }
     }
   })

Este es mi HTML.

 <form method="post" action="#" id="update-form" autocomplete="off">
  <ol>
         <li class="ajax-auto">
             <label for="form-initials">Initials</label>
                <input type="text" id="form-initials" name="initials" />
            </li>
         <li class="ajax-auto">
             <label for="form-company">Company</label>
                <input type="text" id="form-company" name="company" />
            </li>
  </ol>
 </form>

¿Alguna sugerencia?

Answer 1

Aunque no es lo ideal, he hackeado / modificado el complemento para que funcione para mí.

Simplemente, he alterado la función jQuery de AJAX dentro del complemento.

Alrededor de la línea 363 verá:

        $.ajax({
            // try to leverage ajaxQueue plugin to abort previous requests
            mode: "abort",
            // limit abortion to this input
            port: "autocomplete" + input.name,
            dataType: options.dataType,
            url: options.url,
            data: $.extend({
                q: lastWord(term),
                search_type: $(input).attr(''name''), // my mod to pickup multiple fields
                limit: options.max
            }, extraParams),
            success: function(data) {
                var parsed = options.parse && options.parse(data) || parse(data);
                cache.add(term, parsed);
                success(term, parsed);
            }
        });

Todavía estoy buscando una solución elegante para esto, así que no dude en seguir recibiendo sugerencias.

Answer 2

Con respecto a la respuesta más votada, creo que hay una sintaxis mucho más simple simplemente agregando el valor de solicitud adicional en la URL de origen.

Esta:

$("#city_id").autocomplete({
    source: src+"?country_id="+$("#country_id").val().
    min_length: 3,
    delay: 300
});

hace lo mismo que:

$("#city_id").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: src,
            dataType: "json",
            data: {
                term : request.term,
                country_id : $("#country_id").val()
            },
            success: function(data) {
                response(data);
            }
        });
    },
    min_length: 3,
    delay: 300
});

Dado que src es una cadena de url.

Answer 3

Entiendo que ya ha sido respondido. Pero espero que esto ayude a alguien en el futuro y ahorre mucho tiempo y dolor.

(you can replace ''CRM.$'' with ''$'' or ''jQuery'' depending on your jQuery version)

El código completo está debajo: Este lo hice para un cuadro de texto para hacerlo Autocompletar en CiviCRM. Espero que ayude a alguien

CRM.$( ''input[id^=custom_78]'' ).autocomplete({
            autoFill: true,
            select: function (event, ui) {
                    var label = ui.item.label;
                    var value = ui.item.value;
                    // Update subject field to add book year and book product
                    var book_year_value = CRM.$(''select[id^=custom_77]  option:selected'').text().replace(''Book Year '','''');
                    //book_year_value.replace(''Book Year '','''');
                    var subject_value = book_year_value + ''/'' + ui.item.label;
                    CRM.$(''#subject'').val(subject_value);
                    CRM.$( ''input[name=product_select_id]'' ).val(ui.item.value);
                    CRM.$(''input[id^=custom_78]'').val(ui.item.label);
                    return false;
            },
            source: function(request, response) {
                CRM.$.ajax({
                    url: productUrl,
                        data: {
                                        ''subCategory'' : cj(''select[id^=custom_77]'').val(),
                                        ''s'': request.term,
                                    },
                    beforeSend: function( xhr ) {
                        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
                    },

                    success: function(result){
                                result = jQuery.parseJSON( result);
                                //console.log(result);
                                response(CRM.$.map(result, function (val,key) {
                                                         //console.log(key);
                                                         //console.log(val);
                                                         return {
                                                                 label: val,
                                                                 value: key
                                                         };
                                                 }));
                    }
                })
                .done(function( data ) {
                    if ( console && console.log ) {
                     // console.log( "Sample of dataas:", data.slice( 0, 100 ) );
                    }
                });
            }
  });

Código PHP sobre cómo devolveré los datos a esta llamada jquery ajax en autocompletar:

/**
 * This class contains all product related functions that are called using AJAX (jQuery)
 */
class CRM_Civicrmactivitiesproductlink_Page_AJAX {
  static function getProductList() {
        $name   = CRM_Utils_Array::value( ''s'', $_GET );
    $name   = CRM_Utils_Type::escape( $name, ''String'' );
    $limit  = ''10'';

        $strSearch = "description LIKE ''%$name%''";

        $subCategory   = CRM_Utils_Array::value( ''subCategory'', $_GET );
    $subCategory   = CRM_Utils_Type::escape( $subCategory, ''String'' );

        if (!empty($subCategory))
        {
                $strSearch .= " AND sub_category = ".$subCategory;
        }

        $query = "SELECT id , description as data FROM abc_books WHERE $strSearch";
        $resultArray = array();
        $dao = CRM_Core_DAO::executeQuery( $query );
        while ( $dao->fetch( ) ) {
            $resultArray[$dao->id] = $dao->data;//creating the array to send id as key and data as value
        }
        echo json_encode($resultArray);
    CRM_Utils_System::civiExit();
  }
}

Answer 4

Estoy usando la función autocompletar que ahora es parte de jquery ui. Pasar un campo ''extraParams'' no funciona pero solo puede agregar los valores en la cadena de consulta de solicitud.

$(document).ready(function() {
    src = ''http://domain.com/index.php'';

    // Load the cities straight from the server, passing the country as an extra param
    $("#city_id").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: src,
                dataType: "json",
                data: {
                    term : request.term,
                    country_id : $("#country_id").val()
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        min_length: 3,
        delay: 300
    });
});

Answer 5

No estoy seguro de por qué no funciona.

Pero primero puede verificar / depurar el valor de $(this).attr(''name'') .

También una cosa más como se explica aquí [en la pestaña de opciones], puede consultar con Firebug para ver la solicitud de publicación ajax (para url y sus datos) que le ayudará a resolver el problema.

Answer 6

Prueba con

$( "#ricerca" ).autocomplete({
                source: "response.php?param=param",
                minLength: 2
});

Answer 7

Prueba esto:

$(''.ajax-auto input'').setOptions({
  extraParams: {
    search_type: function(){
      return $(this).attr(''name'');
    }
  }
})

Ver tambien here

Answer 8

Puede utilizar el autocompletado de jquery ui incorporado de la siguiente manera:

          $(function() {
         $("#BurroughName").autocomplete({
                minLength: 0,
                source: function( request, response) {
                            $.ajax({
                                        url: "/JsonData/GetBurroughFromSearchTermJson",
                                        dataType: "json",
                                        data: {
                                                    term: request.term,
                                                    CityId: $("#CityId").val()
                                        },
                                        success: function( data ) {
                                                    response( data );
                                        }
                            });
                },                  
                select: function( event, ui) {
                    $("#BurroughId").val(ui.item.id);

                    if (ui.item.id != null) {
                         var cityId = $(''#CityId'').val();
                        $.getJSON("/AdSales/City.mvc/GetCityJSONListFromBrand", { burroughId: ui.item.id }, function(data) {
                             $("#CityId").fillSelect(data);
                             var foo = $("#CityId option[value=" + cityId + "]");
                             if(($("#CityId option[value=" + cityId + "]").length > 0) && cityId != "")
                             {
                                 $("#CityId").val(cityId);
                             }
                        });
                    }
                    $(''#burroughSpinner'').fadeOut(''slow'', function(){});
                }
         });
     });

Aquí está su ejemplo de jsonp: http://jqueryui.com/demos/autocomplete/#remote-jsonp

Answer 9

Tuve el mismo problema, pero curiosamente, solo con la versión minified del complemento autocompletado. Cuando utilicé la versión no minificada, funciona. Todavía no he visto la versión reducida para ver cuál podría ser la diferencia.

Answer 10

Tuve un problema similar ... no sé si funcionará para ti ...

Lo intenté

 $("#awbCusName").autocomplete("getOracleCus.php?",{
  extraParams: {
  ZONE: function() { return $("#awbZone").val(); }, 
  SE: function() { return $("#awbSE").val(); }, 
  WSC: function() { return $("#awbWSC").val(); } 
 },
delay:200,
selectOnly:true,
cacheLength:0,
autoFill:true,
matchSubset:true,
minChars:1
});

CACHELENGO: 0 hizo el truco

Gracias

Answer 11

Usando el autocompletado en JQuery 1.7. Algo ...

Usando una cuadrícula de datos aspx: necesitaba autocompletar para disparar para cualquier registro elegido pero con diferentes datos de semilla en función del valor ingresado. También necesitaba otros dos campos que se muestran en el registro en la cuadrícula de datos para obtener mis datos para el autocompletado. Los campos que necesito para referenciar todos tienen su propio nombre de clase.

    $(".AutoSearch").autocomplete({
            DateTime: "",
            Maker: "",
            search: function (event, ui) {
                DateTime = $(this).parent().parent().parent().find(".DateTime").text();
                Maker = $(this).parent().parent().parent().find(".Maker").text();
            },
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "AutoList.aspx/GetListOfAutos",
                    data: "{ " +
                        "''DateTime'': ''" + DateTime + "'', " +
                        "''Maker'': ''" + Maker + "'', " +
                        "''SearchSeed'': ''" + request.term + "'', " +
                        "''NumberToRetrieve'': ''" + 100 + "''" +
                    " }",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.Description,
                                value: item.Number
                            }
                        }));
                    },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("There was an error retrieving the Data.");
                    }
                });
            },
            change: function (event, ui) {
                $(this).parent().parent().parent().parent().parent().parent().css("background-color", "#EEC900");
                $(this).parent().parent().parent().parent().parent().parent().find(".chkReadyExport").find("input:checkbox").prop("checked", false);
            },
            select: function (event, ui) {
                this.value = ui.item.value;
                return false;
            },
            minlength: 6,
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });
    }

Añadí dos propiedades; DateTime y Maker y luego usar la búsqueda: que se dispara antes de que se complete el autocompletar fuente: pude obtener los datos que necesitaba de la fila en la que estaba. Esto me proporcionó una buena manera de mantener todas mis búsquedas y elementos de datos adicionales en un solo lugar.

El .parent (). Parent () y así sucesivamente se debe a que tengo tablas de múltiples líneas para mostrar mis datos en la vista de cuadrícula y necesito atravesar el árbol y luego encontrar el cuadro de texto o la etiqueta que estoy buscando y cambiar El color de fondo de la fila con los datos modificados. No soy competente en la búsqueda de artículos con jQuery pero, por lo tanto, el padre.

Answer 12

use un .each primero, luego puede usar $ (esto) y configurar lo que necesite en una variable. La variable resultante puede ser utilizada en el autocompletar.

$(".autosuggest").each(function (index, object) {
    var autosuggestType = $(this).attr("autoSuggestType");
    $(this).autocomplete("url",
            {                    
                extraParams: {
                    autoSuggestType: autosuggestType
                },

Answer 13

jQuery( "#jac" ).autocomplete({
    source: autocompleteURL,
    minLength: 2,
    search: function( event, ui ) { 

        // update source url by adding new GET params
        $(this).autocomplete( ''option'', ''source'', autocompleteURL + ''var1=aaa&var2=bbb'' );
    }
})

Funciona para mí con jquery.ui.autocomplete 1.8.17