No result found error in search autocomplete ajax-CodePudding

I am trying to make a search field and in autocomplete Displayed if Total matching search found and No search found if it doesn't match. The problem is when I enter the correct search and then enter the wrong keyword it shows No search found but when I refresh the page and enter the wrong keyword, in the beginning, it doesn't show No search found.Please help me to fix this.

Ajax

 $(document).on("click",".btnsrch_AV8FK",function get_datas(e) {
        var search= $("#search").val();
        
        if (search != "") {
            $.ajax({
            url: "<?= BASEURL ?>ajaxCL",
            type: "POST",
            datatype: "JSON",
            data:{search:search}, 
                success: function (data) {
               // console.log(data)
                    if (data) {
                    $(".autocomplete_srch_AV8FK").html(data);  
                    $('.autocomplete_srch_AV8FK').show();
                    $(".clearsearch").css({'display':'flex'});
                    }else{
                        $(".autocomplete_srch_AV8FK").html('<header><strong>No result found</strong></header>');  
                    }
                }
            });
        
        } else {
            $(".autocomplete_srch_AV8FK").html(""); 
        }
        $("#search").keyup(function() {
        if($(this).val().length <1) {
            $(".autocomplete_srch_AV8FK").empty();
            $(".autocomplete_srch_AV8FK").hide(); 
            $('.clearsearch').css({'display':'none'});
        }
        });
       
    e.preventDefault();
});

CodePudding user response：

I think this can give you a good start, I am using a dummy json API, you can search by iphone, laptop for example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <input id="search" type="text" />
    <button >Search</button>

    <div ></div>
    <button  style="display: none">Clear</button>

    <script>
      $(document).on("click", ".btnsrch_AV8FK", function (e) {
        var search = $("#search").val();

        $(".autocomplete_srch_AV8FK").html("Loading...");

        if (search != "") {
          $.ajax({
            url: "https://dummyjson.com/products/search",
            type: "GET",
            datatype: "JSON",
            data: { q: search },
            success: function (data) {
              if (data.total > 0) {
                const html = data.products.map(
                  (row) => `
                <div style="border: 1px solid black; width: 300px; margin: 10px 0;">
                    <p>${row.title}</p>
                    <p>${row.description}</p>
                </div>  
                `
                );

                $(".autocomplete_srch_AV8FK").html(html);
                $(".clearsearch").css({ display: "flex" });
              } else {
                $(".autocomplete_srch_AV8FK").html("<header><strong>No result found</strong></header>");
              }
            },
            error: function (err, other, other2) {
              console.log(err, other, other2);
            },
          });
        } else {
          $(".autocomplete_srch_AV8FK").html("");
        }

        e.preventDefault();
      });

      //moved this 2 out of the other click, to avoid adding the event multiple times
      $("#search").keyup(function (e) {
        if ($(this).val().length < 1) {
          $(".autocomplete_srch_AV8FK").empty();
          $(".clearsearch").css({ display: "none" });
        }

        if (e.keyCode == 13) {
          //search also using the enter key
          $(".btnsrch_AV8FK").click();
        }
      });

      $(".clearsearch").click(function () {
        $(".autocomplete_srch_AV8FK").empty();
        $(".clearsearch").css({ display: "none" });
      });
    </script>
  </body>
</html>