nuBuilder Forum

Posted: **Thu Apr 26, 2018 11:41 am**

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

Posted: **Thu Apr 26, 2018 1:46 pm**

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
        }
    });
	
}

Posted: **Thu Apr 26, 2018 2:47 pm**

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

Posted: **Thu Apr 26, 2018 3:46 pm**

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);
        }
    });
}

Posted: **Thu Apr 26, 2018 4:59 pm**

It works, thanks !

Posted: **Thu Apr 26, 2018 6:46 pm**

nuBuilder Forum

Two fields auto completion

Two fields auto completion

Re: Two fields auto completion

Re: Two fields auto completion

Re: Two fields auto completion

Re: Two fields auto completion

Re: Two fields auto completion