Autocomplete: populate cities from countries and select a different field other than name


#1

I am using GRUD and I have the following autocomplete field

        $this->hasOne('country_id', [new Country(), 
            'ui'=>[
                'form'=>['AutoComplete'], 
                'settings'=>[
                    'allowReselection' => true,
                    'selectOnKeydown' => true,
                    'onChange' => new atk4\ui\jsExpression('function(value,t,c) 
                    {
                        if ($(this).data("value") !== value) {
                            $(this).parents(".form").form("submit");
                            $(this).data("value", value);
                    }}'),
            ]  
        ]]);

the problem it is that my country table has the field country_name not a column field with name “name”…

If I rename it to name it works like below:

class Country extends Model {
    public $table = 't_countries';

    function init() {
        parent::init();
        $this->addField('name');
        $this->setOrder('name');
    }
}

but if I use the correct name of the column field it does not work:

class Country extends Model {
    public $table = 't_countries';

    function init() {
        parent::init();
        $this->addField('country_name');
        $this->setOrder('country_name');
    }
}

QUESTION:

how to change the default field to country_name instead of the default “name” field for everything in this case?

how can I populate the dropdown cities that it is the same structure as country so after selecting country I can see only the cities that belongs to this country selected… ?

If I use semantic only it works but inside ATK4 I do not see if there is a way to make this works…

thanks for any ideas and tips!


#2

I think I found out how to change the default field other than “name”

public $title_field = 'country_name';

class Country extends Model {
    public $table = 't_countries';
    public $title_field = 'country_name';

    function init() {
        parent::init();

        $this->addField('country_name');
        $this->setOrder('country_name');
    }
}

but for the population of cities from countries I think I need to find out how to make this works in ATK4…

Any tips welcomed!!!

thanks


#3

Basically you would need to include current value of country id when showing cities. There are two ways to approach it:

Classic: whenever city changes, reload countries. This was working in older ATK versions based on jQuery UI. I am not sure if this will work or no, but you can try doing:

$country_field->on('change', $city_field->jsReload([ 'country_id' => $country_field->jsInput()->val() ]);

you also need to apply condition on on cities:

$city_field->model->addCondition('country_id', $city_field->stickyGet('country_id'));

Setting it sticky should help to make sure that if city_field callbacks it would preserve country_id and also condition.

The other option, is to modify query used by autocomplete to include value of the country. I’m not sure how to do that, though, probably something to do here:

The case you describe here is very common and I would love to have this built into ATK and on some demo page at some point, but I’m not very good with JS :frowning:


#4

thanks I can do that :slight_smile: