Можно ли в Jquery изменять таблицу реактивно?

Question

[Pan Propan]

Ребят подскажите пож-та.
Получаю данные с сервера. Могу ли я эти данные загружать в html-таблицу реактивно?
Сейчас все работает, но наблюдается какой то неприятный визуальный эффект при обновлении таблицы.
Код примерно такой.

$( "#polePoiska" ).on('keyup input', function() {
        var value = this.value;
        if (value.length > 3) {
            $.get( "/search?q="+value, function(data) {
                document.getElementById('searchResult').style.display = 'block'
                $.each(data, function (data_key, data_val) {
                    $("#tablePoisk tr").remove();
                    $("table.tableSearch").append("<tr><td>" + data_val.title + "</td><td>" + data_val.pharmacy__title + "</td><td>" + data_val.balance + "</td><td>" + data_val.price + "</td><td>");
                });
            });
        } else {
            document.getElementById('searchResult').style.display = 'none'
        }
        
    });

Comments

[alex]

что по-вашему значит реактивно?

Answer 1

[Stalker_RED]

попробуйте не удалять строку, а заменять.
Или даже менять данные в ячейках, не изменяя разметку.

Comments

[Pan Propan]

такое..

[Stalker_RED]

Pan Propan, вы так и не описали что такое "реактивно"

[Pan Propan]

Stalker_RED, https://habr.com/ru/company/ruvds/blog/418633/

Answer 2

[Pan Propan]

В итоге сделал при помощи vue

<script type="text/javascript">

        var app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#main',
        data () {
            return {
            medicines: [],
            searchText: ''
            }
        },
        methods: {
            searchEvent ({ type, target }) {
            if (target.value.length > 3) {
                document.getElementById('searchResult').style.display = 'block  '
                var textStr = target.value
                axios.get("/search?q=" + textStr.toUpperCase())
                .then(response => {
                    this.medicines = response.data
                })
                .catch(e => {
                    this.errors.push(e)
                })
            } else {
                document.getElementById('searchResult').style.display = 'none'
            }
            }
        }
    })
        
    </script>

Предварительно конечно его подключив

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>