jQuery Autocompletar utilizando extraParams para pasar variables GET adicionales

Question

Me refiero específicamente al complemento jQuery Autocomplete v1.1 de Jörn Zaefferer [fuente: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/] ya que parece haber bastantes 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 deseo que se completen automáticamente las sugerencias.

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

Mi jQuery:

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

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

estoy usando la función de autocompletar que ahora es parte de la interfaz de usuario jQuery. Pasar un campo 'extraParams' no funciona, pero puede anexar 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 2

No estoy seguro de por qué no está funcionando.

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

también una cosa más que here explained [en la pestaña Opciones], se puede comprobar con Firebug para ver solicitud POST ajax (por url y es de datos) que le ayudará a resolver el problema.

Answer 3

Aunque no es el ideal, he pirateado/modificado el complemento para que funcione.

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

alrededor de la línea 363 se 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 a este así que siéntete libre para mantener sugerencias que viene.

Answer 4

Prueba esto:

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

Ver también here

Answer 5

use primero cada uno, luego puede usar $ (esto) y configurar lo que necesite en una variable. la variable resultante puede ser utilizado en el autocompletar

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

Answer 6

que tenía el mismo problema, pero curiosamente, sólo con la versión miniaturizada del plugin autocompletar. Cuando utilicé la versión no minificada, funciona. Aún no he examinado la versión minificada para ver cuál es la diferencia.

Answer 7

Usted puede utilizar el construido en jQuery UI autocompletar de este modo:

  $(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 jsonp: http://jqueryui.com/demos/autocomplete/#remote-jsonp

Answer 8

tuve un problema similar ... no sé si va a trabajar para usted ....

Traté

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

CACHELENGTH: 0 hizo el tric k

Gracias

Answer 9

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

Answer 10

Uso de la función de autocompletar en jQuery 1.7.something ...

El uso de una cuadrícula de datos aspx: Necesitaba autocompletar para disparar para cualquier registro elegido pero con diferentes datos de inicialización basados ​​en el 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 la autocompletar. Los campos a los que necesito hacer referencia 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"); 
      } 
     }); 
    } 

He añadido dos propiedades; DateTime and Maker y luego usando search: que se dispara antes de la fuente de incendios de autocompletar: Pude obtener los datos que necesitaba de la fila en la que estaba. Esto me proporcionó una buena manera de mantener todos mis elementos de búsqueda y datos extra en un solo lugar.

El .parent(). Parent() y así sucesivamente es porque tengo tablas de varias 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 Soy buscar y cambiar el color de fondo de la fila con los datos modificados. No soy competente para encontrar elementos con jQuery, pero sí el elemento parent.parent ...

Answer 11

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

Este:

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

src dado que es una cadena URL.

Answer 12

intento con

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

Answer 13

entiendo que su estado ya ha respondido. pero espero que esto ayude a alguien en el futuro y ahorre tanto tiempo y dolor.

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

código completo es el siguiente: Este lo hice para un cuadro de texto para que sea de autocompletar en CiviCRM.Espero que ayuda 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 en la forma en que estoy volviendo datos a este jQuery llamada AJAX en la función 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(); 
    } 
}