jQuery Autocomplete à l'aide de extraParams passer supplémentaires à OBTENIR des variables

Je suis l'aide de la fonction d'auto-complétion, qui fait maintenant partie de jquery ui.
En passant d'une " extraParams champ ne fonctionne pas, mais vous pouvez simplement ajouter les valeurs dans la demande de la chaîne 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 le construit en jquery ui autocomplete 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 jsonp exemple: http://jqueryui.com/demos/autocomplete/#remote-jsonp

Alors que moins d'un idéal, j'ai piraté/modifié le plugin pour le faire fonctionner pour moi.

Simplement, j'ai modifié la fonction jQuery AJAX 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, alors n'hésitez pas à garder des suggestions à venir.

À l'aide de la saisie semi-automatique dans JQuery 1.7.quelque chose...

À l'aide d'un aspx grille de données: j'ai besoin de la saisie semi-automatique d'incendie pour tout dossier choisi, mais avec des graines de données fondées sur la valeur entrée. J'ai aussi besoin de deux autres champs qui sont affichés dans le dossier sur la grille de données pour récupérer mes données pour la saisie semi-automatique.
Les champs j'ai besoin de faire référence à tous d'avoir 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 à l'aide de la recherche: qui est déclenché avant la saisie semi-automatique des feux de la source: j'ai été en mesure d'obtenir les données dont j'ai besoin à partir de la ligne que j'ai été sur. Cela m'a fourni une belle façon de garder tous mes recherche et extra éléments de données en un seul endroit.

L' .parent().parent() et ainsi de suite est parce que j'ai plusieurs ligne de tableaux pour afficher mes données dans le contrôle gridview et j'ai besoin de traverser la hauteur de l'arbre, et ensuite trouver la zone de texte ou une étiquette, je suis à la recherche pour et changer la couleur d'arrière-plan de la ligne avec les données modifiées. Je ne suis pas compétent dans la recherche d'éléments avec jQuery mais le parent.parent... chose.

Je ne suis pas sûr pourquoi il ne fonctionne pas.

Mais vous pouvez d'abord vérifier/debug pour 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.

J'ai eu le même problème, mais curieusement, seulement avec la version compacte de la saisie semi-automatique du plugin. Lorsque j'ai utilisé la non-version minifiée, il fonctionne. Je n'ai pas regardé la version minifiée encore à voir ce que la différence peut être.

Je comprends que sa fait déjà répondu. mais j'espère que cela va aider quelqu'un dans le futur et qui sauve beaucoup de temps et de la douleur.

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

code complet est ci-dessous: j'ai une zone de texte pour faire la saisie semi-automatique dans CiviCRM. Espérons que cela 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 suis le renvoi de données à ce jquery ajax appel de la 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();
}
}