Custom editor

jalape

Good afternoon
I'm trying to create a search engine to be able to select a record within a custom editor: template: '#customForm',
The field I want to filter is:
<editor-field name = "tb_palabra []. id"> </ editor-field>
I would appreciate any surgency.
A greeting.

colin

Hi @jalape ,

I'm not sure what you're after, but search() can be used to filter the table.

Hope that helps,

Cheers,

Colin

jalape

Hi Colin,
Thanks for your interest. I think the most common way to create a filter field from a text input is:

$('#myInput').on( 'keyup', function () {
variable_tabla_datatable.search( this.value ).draw();
} );

This filters one or more columns in a table.
In my case, I want to filter a field, inside the editor box, created from the property:

template: '#customForm',
I have created the following div:

Palabras Clave:

And it's the field I want to filter is:
<editor-field name = "tb_palabra []. id"> </ editor-field>
In the screenshot of the image appears as "Keywords". It is a word verification field to activate. The problem is that it is very large and without a filter it is difficult to find the one that is needed.

Thank you

jalape

Palabras Clave:

allan

Hi,

That ability is not a feature of the field types that are built into Editor I'm afraid. You would need to create a custom field type plug-in which has that ability if you need it.

Regards,
Allan

jalape

I have never used the plug-ins, I will look at the information.
Thank you

jalape

I think I'm getting closer to the solution, but it still does not work at all. In this way, it filters the set of words in the list, so that, the content of the entry does not coincide with any word, the list disappears. What I can not find is the way to filter, so that they are written on the entry, the list is reduced.
The problem is that I do not know how to control <editor-field name="tb_palabra[].id"></editor-field> since I can not put an id or a class.

</fieldset>
<fieldset class="hr">
    <legend id="leyenda">Palabras Clave: </legend>
    <div id="scrollPalabras">
        <input type="text" id="myInput">
        <div id="palabras">
            **<editor-field name="tb_palabra[].id"></editor-field>**
        </div>  
    </div>
</fieldset>


<script type="text/javascript">
    editor = $('#myInput').on( 'keyup', function () {

    var value = $(this).val().toLowerCase();
        $("#palabras").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    } );
</script>

Thank you

jalape

It seems that the problem is not the control of the container, but as a datatable it manages the contained list. I have found this another way, but the problem persists. The input: myInput filters as a block, shows the entire list as long as there is a match and disappears completely when there is none. The question is: how does Datatable manage these lists? and how to enter them to filter them?

<input type="text" id="myInput">
<span data-editor-template="tb_palabra[].id"></span>


<script>
    $('#myInput').on( 'keyup', function () {
                //$("#palabras").hide();
                var value = $(this).val().toLowerCase();
        $("span").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    } );
</script>

allan

Are you looking for something like this? As I say, Editor doesn't not provide a built in way to allow for filtering of options in a checkbox list. You would need a field-type plug-in to allow for that ability.

Allan

jalape

Hi Allan,
Thank you very much for your contribution, select2 is a very interesting plug-in. At the following address:
https://editor.datatables.net/plug-ins/field-type/editor.select2,
I have found information to adapt it to Datatable. Now it shows me the data and I filter the list correctly, inside the editor box. I even update the data correctly, if they come from a single table.
The problem is with the data that comes from the union of several SQL tables.
I have summarized the code with the fields with problems, in both I get an error when editing.
- In the first case, "Materia" the error is: A system error has occurred (More information). When an Editor request is made and the data is not in the expected format (JSON). In Firefox> Web Developer> no problem.
- In the second case, "Palabra" the error is: input not valid

fields: [
        {
            label: "Materia:",
            name:  "tb_libro.materia_id",
            type: "select2",
            opts: {
                "placeholder": "Seleccione una materia",
                "allowClear": true
            }
        },
        {
            label: "Pal. Clave:",
            name: "tb_palabra[].id",
            type: "select2",
            opts: {
                "placeholder": "Select State",
                "allowClear": true
            }
        }
    ]


/ * PHP implementation used */
Editor::inst( $db, 'tb_libro' )
->field( 
    Field::inst( 'tb_libro.materia_id' )
    ->options( Options::inst()
        ->table( 'tb_materia' )
        ->value( 'id' )
        ->label( 'materia' )
    ),
    Field::inst( 'tb_materia.materia' ),
)

->leftJoin( 'tb_materia', 'tb_materia.id', '=', 'tb_libro.materia_id' )
->join(
    Mjoin::inst( 'tb_palabra' )
    ->link( 'tb_libro.id', 'palabra_libro.libro_id' )
    ->link( 'tb_palabra.id', 'palabra_libro.palabra_id' )
    ->order( 'palabra asc' )
    ->fields(
        Field::inst( 'id' )
        ->validator( Validate::required() )
        ->options( Options::inst()
            ->table( 'tb_palabra' )
            ->value( 'id' )
            ->label( 'palabra' )
        ),
        Field::inst( 'palabra' )
    )
)

->process($_POST)
->json();

jalape

Solved. The problem was actually in the "Palabra" field with the control tb_palabra []. Id. A multiple field, actually.

    fields: [
        {
            label: "Pal. Clave:",
            name: "tb_palabra[].id",
            type: "select2",
            opts: {
                    "placeholder": "Select State",
                            "multiple": "multiple",
                    "allowClear": true
            }
        }
    ]

I repeat my thanks to Allan for the hint of the great select2 plug-in.

allan

Thanks for posting back. Sorry I didn't get to your question before you found the solution yourself, but delighted to hear that you have.

Allan