Question

I would like to change the value in minChars depending on a select value ?
I tried :

    var nbCharIso = 4;

    $j('#pays').change(function() {
      var isoPays = $j('select.pays option:selected').val();
      nbCharIso = (isoPays == 'Canada') ? 3 : nbCharIso; 
      alert(nbCharIso);
    });

    $j("#cp").autocomplete('codepostal.inc.php', {
        delay: 100,
        cacheLength: 0,
        //minChars: 4,
        minChars: nbCharIso,
        max: 100,
        width: 320,
        scrollHeight: 160,
        multiple: false,
        matchContains: true,
        formatItem: formatItem,
        formatResult: formatResult,
        extraParams: {
            country: function() { return $j('select.pays option:selected').val(); } 
        }
    }).result(function(e, item) {
        // foo
    });

But this doesn’t work !
How can I change dynamically the minChars value in the autocomplete function ?

Thanks for your help…

Answer 1

That’s because .autocomplete is only being called once – when the form is loaded. At the time it is called the value of nbCharIso is 4.

//var nbCharIso = 4; // comment this out or delete it
setupAutocomplete(4); // add this

$j('#pays').change(function() {
  var isoPays = $j('select.pays option:selected').val();
  var nbCharIso = (isoPays == 'Canada') ? 3 : 4; 
  //alert(nbCharIso);
  setupAutocomplete(nbCharIso); // add this
});

// wrap .autocomplete in a function so we can call it whenever we want
function setupAutocomplete(nbCharIso) {
$j("#cp").autocomplete('codepostal.inc.php', {
    delay: 100,
    cacheLength: 0,
    //minChars: 4,
    minChars: nbCharIso,
    max: 100,
    width: 320,
    scrollHeight: 160,
    multiple: false,
    matchContains: true,
    formatItem: formatItem,
    formatResult: formatResult,
    extraParams: {
        country: function() { return $j('select.pays option:selected').val(); } 
    }
}).result(function(e, item) {
    // foo
});

}