web-dev-qa-db-fra.com

Comment passer un paramètre supplémentaire au champ Jquery Autocomplete?

J'utilise la saisie semi-automatique JQuery dans l'un de mes formulaires.

Le formulaire de base sélectionne les produits de ma base de données. Cela fonctionne très bien, mais j'aimerais continuer à développer afin que seuls les produits expédiés à partir d'un certain code postal soient retournés. J'ai compris le script backend. J'ai juste besoin de trouver la meilleure façon de transmettre le code postal à ce script.

Voici à quoi ressemble mon formulaire.

<form>

<select id="zipcode">

<option value="2000">2000</option>
<option value="3000">3000</option>
<option value="4000">4000</option>

</select>

<input type="text" id="product"/>

<input type="submit"/>

</form>

Et voici le code JQuery:

$("#product").autocomplete
({
     source:"product_auto_complete.php?postcode=" + $('#zipcode').val() +"&",
     minLength: 2,
     select: function(event, ui){

                             //action

                                 }
});

Ce code fonctionne dans une certaine mesure. Mais ne renvoie que la première valeur du code postal, quelle que soit la valeur réellement sélectionnée. Je suppose que ce qui se passe, c'est que l'URL source est amorcée au chargement de la page plutôt que lorsque le menu de sélection est modifié. Y a-t-il un moyen de contourner ceci? Ou existe-t-il une meilleure façon globale d'obtenir le résultat que je recherche?

jquery-uijqueryjquery-ui-autocomplete
56
matt

Vous devez utiliser une approche différente pour l'appel source, comme ceci:

$("#product").autocomplete({
  source: function(request, response) {
    $.getJSON("product_auto_complete.php", { postcode: $('#zipcode').val() }, 
              response);
  },
  minLength: 2,
  select: function(event, ui){
    //action
  }
});

Ce format vous permet de transmettre la valeur lorsqu'elle est exécutée, par opposition à lorsqu'elle est liée.

84
Nick Craver

Ce n'est pas pour les hommes compliqués:

$(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
});
});
26
Daniel Kennedy

Je crois que vous avez raison de penser que votre appel à $("#product").autocomplete se déclenche au chargement de la page. Vous pouvez peut-être affecter un gestionnaire onchange () au menu de sélection:

$("#zipcode").change(resetAutocomplete);

et le faire invalider le #product appel autocomplete () et créez-en un nouveau.

function resetAutocomplete() {
    $("#product").autocomplete("destroy");
    $("#product").autocomplete({
         source:"product_auto_complete.php?postcode=" + $('#zipcode').val(),
         minLength: 2,
         select: function(event, ui){... }
    });
}

Vous voudrez peut-être que votre appel resetAutocomplete () soit un peu plus intelligent - comme vérifier si le code postal diffère réellement de la dernière valeur - pour enregistrer quelques appels de serveur.

6
Paul Schreiber
jQuery("#whatJob").autocomplete(ajaxURL,{
    width: 260,
    matchContains: true,
    selectFirst: false,
    minChars: 2,
    extraParams: {  //to pass extra parameter in ajax file.
        "auto_dealer": "yes",
    },
});
5
Bharat Parmar

Ce travail pour moi. Remplacez l'événement search:

jQuery('#Distribuidor_provincia_nombre').autocomplete({
    'minLength':0,
    'search':function(event,ui){
        var newUrl="/conf/general/provincias?pais="+$("#Distribuidor_pais_id").val();
        $(this).autocomplete("option","source",newUrl)
    },
    'source':[]
});
3
Knito Auron
$('#txtCropname').autocomplete('Handler/CropSearch.ashx', {
    extraParams: {
        test: 'new'
    }
});
0
SrinivasNyalam
$('#product').setOptions({
    extraParams: {
        extra_parameter_name_to_send: function(){
            return $("#source_of_extra_parameter_name").val();
        }
    }
})
0
Roman Losev

J'espère que celui-ci aidera quelqu'un:

$("#txt_venuename").autocomplete({
    source: function(request, response) {
    $.getJSON('<?php echo base_url(); ?>admin/venue/venues_autocomplete', 
        { 
            user_id: <?php echo $user_param_id; ?>, 
            term: request.term 
        }, 
      response);
    },
    minLength: 3,
    select: function (a, b) {            
        var selected_venue_id = b.item.v_id;
        var selected_venue_name = b.item.label;            
        $("#h_venueid").val(selected_venue_id);
        console.log(selected_venue_id);            
    }
});

Le "terme" par défaut sera remplacé par la nouvelle liste de paramètres, vous devrez donc l'ajouter à nouveau.

0
Sanjoy