jQuery Autocomplete utilisant extraParams pour transmettre des variables GET supplémentaires
Je fais spécifiquement référence au plugin jQuery Autocomplete v1.1 de Jörn Zaefferer [source: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/] , car il semble y avoir quelques variations de ce plugin.
J'essaie de transmettre des paramètres supplémentaires au serveur lorsque l'utilisateur commence à taper car j'ai plusieurs champs pour lesquels je souhaite que la saisie semi-automatique fournisse des suggestions.
En plus de la requête, je souhaite envoyer l'attribut input name au serveur, mais il me semble impossible d'utiliser $ (this) .attr ('name') dans les extraParams.
Mon jQuery:
$('.ajax-auto input').autocomplete('search.php', {
extraParams: {
search_type: function(){
return $(this).attr('name');
}
}
})
Ceci 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>
Aucune suggestion?
J'utilise la fonction autocomplete qui fait maintenant partie de jquery ui . Passer un champ 'extraParams' ne fonctionne pas, mais vous pouvez simplement ajouter les valeurs dans la chaîne de requête de la 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
});
});
Essaye ça:
$('.ajax-auto input').setOptions({
extraParams: {
search_type: function(){
return $(this).attr('name');
}
}
})
Voir aussi ici
J'ai eu un problème similaire ... ne sais pas si cela fonctionnera 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 le tour
Merci
Vous pouvez utiliser l’auto-complétion intégrée de jquery ui comme ceci:
$(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
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 à l'URL source.
Ce:
$("#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.
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 à ce problème, alors n'hésitez pas à continuer à nous 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.ui.autocomplete 1.8.17
Utilisation de la saisie semi-automatique dans JQuery 1.7.quelquechose ...
Utilisation d'une grille de données aspx: J'avais besoin de la fonction de 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 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 and Maker et ensuite à l'aide de search: qui est déclenché avant que la source de saisie semi-automatique ne se déclenche: 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 toutes mes données de recherche et mes données supplémentaires au même endroit.
Le .parent (). Parent () et ainsi de suite, c’est parce que j’ai des tableaux multilignes pour afficher mes données dans le gridview; la couleur de fond de la ligne avec les données modifiées. Je ne suis pas encore compétent pour trouver des éléments avec jQuery, donc le parent.parent ... chose.
J'ai eu le même problème, mais assez curieusement, seulement avec la version abrégée du plugin autocomplete. Quand j'ai utilisé la version non minifiée, cela fonctionne. Je n'ai pas encore examiné la version abrégée pour voir quelle pourrait être la différence.
Essayer avec
$( "#ricerca" ).autocomplete({
source: "response.php?param=param",
minLength: 2
});
Je comprends que sa été déjà répondu. mais j'espère que cela aidera quelqu'un à l'avenir et fera économiser 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 créé pour une zone de texte afin de le compléter automatiquement 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 renvoie des données à cet appel jquery ajax en saisie semi-automatique:
/**
* 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();
}
}
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, encore une chose comme comme expliqué ici [dans l'onglet options], vous pouvez vérifier avec Firebug pour voir la demande de publication ajax (pour l'URL et ses données) qui vous aidera à résoudre le problème .
commencez par utiliser un fichier .each. Vous pouvez ensuite utiliser $ (this) et définir tout ce dont vous avez besoin dans une variable. la variable résultante peut être utilisée dans la complétion automatique
$(".autosuggest").each(function (index, object) {
var autosuggestType = $(this).attr("autoSuggestType");
$(this).autocomplete("url",
{
extraParams: {
autoSuggestType: autosuggestType
},