Is it possible to create a search engine with stimulus?

1

I am trying to create a search engine with stimulus, to replace the jquery datatable component, but I run into a problem and that is that my target name returns undefined
This is my controller:
const application = Stimulus.Application.start();
const { Controller } = Stimulus;

application.register(
  'search',
  class extends Controller {
    static get targets() {
      return ['q', 'name'];
    }

    searchTable() {
      console.log(this.nameTargets.value);
    }
  }
);

I have verified my target q, and it works correctly
this is my input template:

 <div data-controller="search">
                    <input type="text" placeholder="Buscar..." maxlength="15" data-action="search#searchTable"
                        data-search-target="q">
                    <table class="highlight centered">
                        <thead>
                            <tr>
                                <th>Tipe de Tarea</th>
                                <th>Estado</th>
                                <th>Fecha de Creacion</th>
                                <th>Accion</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                {% for field in object_list %}
                                <td data-search-target="name">{{ field.name }}</td>
                                <td>{{ field.status|yesno:"Visible, No visible" }}</td>
                                <td>{{ field.created_at }}</td>
                                <td>
                                    <a href="#!">editar</a>
                                </td>
                                {% endfor %}
                            </tr>
                        </tbody>
                    </table>
                </div>

i am using django in my project

2

Shouldn’t it be console.log(this.nameTarget.value) in singular?

3

I need multiple values for that reason targets, although I put target the console continues to print undefined

4

The data-controler directive is missing

5

if i have the controller

6

The nameTargets is an array, so you need to access it like an array. Also, each of the name targets will be a <td> in your example. Therefore, there is not value property on them

1 Like