Two fields auto completion

[marcvander]

Hey,

I already got an answer here from toms: https://forums.nubuilder.cloud/viewtopic.php?f=19&t=9459 regarding field auto completion. It works perfectly.
Now I would like to do something a bit trickier:

when entering a person, I would like to have a field auto completion activated on both fields first name and last name, which looks for both first name and last name at the same time. So far here is the procedure I got:

$sql = "SELECT contact_prenom, contact_nom FROM contact";
$retval = nuRunQuery($sql);
$row_arr = array();
$return_arr = array();

if($retval){
while($row = db_fetch_row($retval)) {
$row_arr['value']= $row;
array_push($return_arr,$row_arr);
}
$nuParameters = json_encode($return_arr);
}

And the JS:

function initAutoComplete(param) {
$("#contact_prenom").autocomplete({
source: JSON.parse(param),
minLength: 1,
select: function(event, ui) {
$(event.target).val(ui.item.value).change();
}
});
}

function nuLoadEdit() {
nuAjax('ContactNomAutoCompletion','initAutoComplete');
}

And the results:

Capture d’écran 2018-04-26 à 11.34.52.png

But when I click on it, it adds both the first name and last name in the field first name.

Capture d’écran 2018-04-26 à 11.34.44.png

I would like to seperate, after clicking only, the first name and last name in the two fields. How can I do it ?

Thanks a lot,

Marc

[toms]

Initialize autocomplete for both "prenom" and "nom" and use the split() method to split up the prenom / nom into separate chunks.

Untested:

Code: Select all

function initAutoComplete(param) {

    $('#contact_prenom').autocomplete({
        source: JSON.parse(param),
        minLength: 1,
        select: function(event, ui) {
            $(event.target).val(ui.item.value.split(',')[0]).change(); // prenom
			$('#contact_nom').val(ui.item.value.split(',')[1]).change(); // nom
        }
    });
	
    $('#contact_nom').autocomplete({
        source: JSON.parse(param),
        minLength: 1,
        select: function(event, ui) {
            $(event.target).val(ui.item.value.split(',')[1]).change(); // nom
			$('#contact_prenom').val(ui.item.value.split(',')[0]).change(); // prenom
        }
    });
	
}

[marcvander]

Thanks toms. I added this JS code to the form:

Code: Select all

function initAutoComplete(param) {

    $('#contact_prenom').autocomplete({
        source: JSON.parse(param),
        minLength: 1,
        select: function(event, ui) {
            $(event.target).val(ui.item.value.split(',')[0]).change();
         $('#contact_nom').val(ui.item.value.split(',')[1]).change();
        }
    });
   
    $('#contact_nom').autocomplete({
        source: JSON.parse(param),
        minLength: 1,
        select: function(event, ui) {
            $(event.target).val(ui.item.value.split(',')[1]).change();
         $('#contact_prenom').val(ui.item.value.split(',')[0]).change();
        }
    });
   
}

function nuLoadEdit() {
nuAjax('ContactNomAutoCompletion','initAutoComplete');
} 

But when I test it, when I click on the offered auto completion, nothing happens:

Capture d’écran 2018-04-26 à 14.43.57.png

[toms]

Give this a try:

Code: Select all

function initAutoComplete(param) {

    function setNames(ui) {

        setTimeout(function() {
            var selectVal = ui.item.value.toString();
            var a = selectVal.split(',')
            $('#contact_prenom').val(a[0]).change();
            $('#contact_nom').val(a[1]).change();
        }, 0);

    }

    $('#contact_prenom').autocomplete({
        source: JSON.parse(param),
        minLength: 1,
        select: function(event, ui) {
            setNames(ui);
        }
    });

    $('#contact_nom').autocomplete({
        source: JSON.parse(param),
        minLength: 1,
        select: function(event, ui) {
            setNames(ui);
        }
    });
}

[marcvander]

It works, thanks !

[admin]

.