When I press backspace then show all product how to prevent it. I need to prevent it when search box text is gone then search result should be gone.

$(document).ready(function(){

            $('#product-keyword').on('keyup', function(e){
                var keyword = $(this).val();
                $.ajax({
                    url:'{{ route("labelProductSearch") }}',
                    data:{
                        keyword: keyword,
                    },
                    success:function(response){
                        $('#search-result').html(response);
                        console.log('Product Found')
                    },
                    error:function(){
                        console.log('Product Not Found')
                    }
                });//End Ajax
            });


        });

and my controller

//search product public function get_product_search(Request $request) { $searchString = $request->keyword;

     $product = Product::where('name', 'LIKE', $searchString.'%')
                ->orWhere('weight', 'LIKE', $searchString.'%')
                ->orWhereHas('stocks', function ($query) use ($searchString) {
                    $query->where('sku', 'LIKE', $searchString.'%');
                })
                ->orderby('id','desc')
                ->get();


        $output = '';
        if (count($product)>0) {
            $output = '<ul >';
            foreach ($product as $row){
                $output .= '<li   onclick="addProductCart('.$row->id.')" >';
                $output .= '<div >';

                $output .= '<div >';
                $output .= '<img src="'.uploaded_asset($row->thumbnail_img).'" width="30" alt="Product Image">';
                $output .= '</div>';

                $output .= ' <div >'.$row->name.'</div></div></li></ul>';

            }
        }else{
            $output = '<ul >';
            $output .= '<li >'.'No results'.'</li>';
            $output .= '</ul>';
        }

        return $output;
 }

CodePudding user response：

Do something like this before sending the ajax request

$(document).ready(function(){

        $('#product-keyword').on('keyup', function(e){
            var keyword = $(this).val();
            // smartly handle if no keyword entered
            if (keyword === '') {
              $('#search-result').html("Please type something to search");
              return;
            }

            $.ajax({
                url:'{{ route("labelProductSearch") }}',
                data:{
                    keyword: keyword,
                },
                success:function(response){
                    $('#search-result').html(response);
                    console.log('Product Found')
                },
                error:function(){
                    console.log('Product Not Found')
                }
            });//End Ajax
        });


    });

Basically you don't need to send ajax request to find product if keyword is not entered. In fact you need to inform used to enter something for searching through products.