当我按下退格键然后显示所有产品如何防止它

Question

当我按下退格键然后显示所有产品如何防止它。我需要在搜索框文本消失时阻止它，然后搜索结果应该消失。

$(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
            });


        });

和我的控制器

//搜索商品 public 函数 get_product_search(请求 $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 class="list-group">';
            foreach ($product as $row){
                $output .= '<li class="list-group-item"  onclick="addProductCart('.$row->id.')" >';
                $output .= '<div class="product d-flex align-items-center">';

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

                $output .= ' <div class="pro-nam">'.$row->name.'</div></div></li></ul>';

            }
        }else{
            $output = '<ul class="list-group">';
            $output .= '<li class="list-group-item">'.'No results'.'</li>';
            $output .= '</ul>';
        }

        return $output;
 }

Answer 1

在发送 ajax 请求之前做这样的事情

$(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
        });


    });

如果没有输入关键字，基本上您不需要发送 ajax 请求来查找产品。事实上，您需要告知用于输入内容以搜索产品。

当我按下退格键然后显示所有产品如何防止它

When I press backspace then show all product how to prevent it

ajax

jquery

laravel