jQuery Autocomplete en utilisant extraParams pour passer des variables GET supplémentaires
Je me réfère spécifiquement au plugin jQuery Autocomplete v1.1 de Jörn Zaefferer [source: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/] comme il semble y avoir pas mal de variantes de ce plugin.
J'essaie de passer des paramètres supplémentaires au serveur lorsque l'utilisateur commence à taper car j'ai plusieurs champs pour lesquels je veux que la saisie semi-automatique fournisse des suggestions.
En plus de la requête, je souhaite envoyer l'attribut input name À le serveur mais je n'arrive pas à utiliser $(this).attr ('nom') dans les extraParams.
Mon jQuery:
$('.ajax-auto input').autocomplete('search.php', {
extraParams: {
search_type: function(){
return $(this).attr('name');
}
}
})
C'est mon 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>
Des suggestions?
13 réponses
J'utilise la fonction de saisie semi-automatique qui fait maintenant partie de l'interface utilisateur jquery. Passer un champ' extraParams'ne fonctionne pas mais vous pouvez simplement ajouter les valeurs dans la chaîne de requête de requête.
$(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
});
});
Vous pouvez utiliser la saisie semi-automatique de l'interface utilisateur jquery intégrée comme suit:
$(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(){});
}
});
});
Voici leur exemple jsonp: http://jqueryui.com/demos/autocomplete/#remote-jsonp
J'ai eu un problème similaire... ne sais pas si il va travailler pour vous ....
J'Ai Essayé
$("#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 a fait l'affaire
Merci
Bien que moins qu'idéal, j'ai piraté / modifié le plugin pour le faire fonctionner pour moi.
Simplement, j'ai modifié la fonction AJAX jquery dans le plugin.
Autour de la ligne 363 vous verrez:
$.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);
}
});
Je suis toujours à la recherche d'une solution élégante à cela, alors n'hésitez pas à continuer à faire des suggestions.
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' );
}
})
Fonctionne pour moi avec jquery.interface.saisie semi-automatique 1.8.17
Utilisation de la saisie semi-automatique dans JQuery 1.7.quelque...
Utilisation d'une grille de données aspx: j'avais besoin de la saisie semi-automatique pour tout enregistrement choisi mais avec des données de départ différentes en fonction de la valeur entrée. J'avais également besoin de deux autres champs qui sont affichés dans l'enregistrement sur la grille de données pour obtenir mes données pour la saisie semi-automatique. Les champs que je dois référencer ont tous leur propre nom de classe.
$(".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");
}
});
}
J'ai ajouté deux propriétés; DateTime et Maker, puis en utilisant search: qui est déclenché avant la saisie semi-automatique déclenche la source: j'ai pu obtenir les données dont j'avais besoin à partir de la ligne sur laquelle j'étais. Cela m'a fourni un bon moyen de garder tous mes éléments de recherche et de données supplémentaires en un seul endroit.
Le .parent().parent () et ainsi de suite est parce que j'ai des tables multi-lignes pour afficher mes données dans le gridview et je dois parcourir l'arbre, puis trouver la zone de texte ou l'étiquette que je recherche et changer la couleur d'arrière-plan de la ligne avec les données modifiées. Je ne suis pas compétent pour trouver des articles avec jQuery encore ainsi le parent.parent... chose.
En ce qui concerne la réponse la plus votée, je pense qu'il existe une syntaxe beaucoup plus simple en ajoutant simplement la valeur de requête supplémentaire dans l'url source.
Ceci:
$("#city_id").autocomplete({
source: src+"?country_id="+$("#country_id").val().
min_length: 3,
delay: 300
});
Fait la même chose 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
});
Étant donné que src est une chaîne d'url.
Je ne sais pas pourquoi cela ne fonctionne pas.
Mais vous pouvez d'abord vérifier / déboguer la valeur de $(this).attr('name').
Aussi une chose de plus que expliquée ici [dans l'onglet options], vous pouvez vérifier avec Firebug voir ajax requête post(pour les url et les données) qui vous aidera à résoudre le problème.
Utilisez un .chaque premier, alors vous pouvez utiliser $(this) et définir ce dont vous avez besoin dans une variable. la variable résultante peut être utilisée dans la saisie semi-automatique
$(".autosuggest").each(function (index, object) {
var autosuggestType = $(this).attr("autoSuggestType");
$(this).autocomplete("url",
{
extraParams: {
autoSuggestType: autosuggestType
},
J'ai eu le même problème, mais curieusement, seulement avec la version minifiée du plugin autocomplete. Quand j'ai utilisé la version non minifiée, cela fonctionne. Je n'ai pas encore regardé la version minifiée pour voir quelle pourrait être la différence.
Essayez avec
$( "#ricerca" ).autocomplete({
source: "response.php?param=param",
minLength: 2
});
Je comprends qu'il a déjà été répondu. mais j'espère que cela aidera quelqu'un à l'avenir et économisera beaucoup de temps et de douleur.
(you can replace 'CRM.$' with '$' or 'jQuery' depending on your jQuery version)
Le code complet est ci-dessous: celui que j'ai fait pour une zone de texte pour le rendre Autocomplete dans CiviCRM. J'espère que ça aide quelqu'un
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 ) );
}
});
}
});
Code PHP sur la façon dont je retourne des données à cet appel ajax jquery en autocomplete:
/**
* 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();
}
}