Как я могу обновить свой живой поиск, нажав на крестик, который находится внутри поля ввода текста в JavaScript?

Question

Я работаю над поиском в реальном времени.Я сделал живой поиск, используя ajax, где независимо от того, какой алфавит я в нем пишу, он отображает результат совпадения с этим алфавитом или словом.Но проблема возникает, когда я щелкаю перекрестную кнопку внутри поля поиска, оно очищает слово внутри поля ввода, но оно не обновляет мой поиск и не показывает данные перед поиском, но результат предыдущего поиска.

Я хочу, чтобы моя функциональная кнопка поиска в реальном времени была похожа на это - https://codepen.io/gastonbesada/pen/eqvJK Но это в угловом аспекте.Я хочу код в JavaScript.

И это мой код -

// пусть имя этой страницы - index.php

<div class="search">
       <i class="fa fa-search" ></i>
      <input type="text" id="searchterm" name="searchterm" placeholder="Search" >   
</div>
<table id="result"></table>

// это скриптof index.php

<script>
$(document).ready(function(){
    load_data();
    function load_data(query)
    {
        $.ajax({
            url:"search.php",
            method:"post",
            data:{query:query},
            success:function(data)
            {
                $('#result').html(data);
            }
        });
    }



$('#searchterm').keyup(function(){
        var search = $(this).val();
        if(search != '')
        {
            load_data(search);
        }
        else
        {
            load_data();            
        }
    });
});
</script>

/ * Поиск сценария для кросс-кнопки внутри поля ввода * /

<script>

(function ($, undefined) {
    $.fn.clearable = function () {
        var $this = this;
        $this.wrap('<div class="clear-holder" />');
        var helper = $('<span title="Press Backspace" class="clear-helper">&times;</span>');
        $this.parent().append(helper);
        $this.parent().on('keyup', function() {
            if($this.val()) {
            helper.css('display', 'inline-block');
            } else helper.hide();
        });
        helper.click(function(){
            $this.val("");
            helper.hide();
        });
    };
})(jQuery);

$("#searchterm").clearable();
</script>

Answer 1

просто вызовите ваш ajax с пустым значением снова, как вы делали в другой части.

helper.click(function(){
   $this.val("");
   $this.trigger("keyup");
   helper.hide();
});