Question

我正在laravel 5电子商务网络应用程序中创建搜索功能。

我希望用户在搜索结果中使用arrow keys移动光标，但我无法实现此目的。

这是控制器：

public function searchProduct(Request $request)
{
    $productName = $request->input('name');
    if($productName !== '')
    {
        $products = Product::where('name', 'LIKE', '%' . $productName . '%')->where('display', 'Enabled')->get();

        return view('partials.search', compact('products'));
    }
    return false;
}

搜索结果：

@foreach($products as $product)
    <li>
        <a href="{{ url('/store/'.$product->code .'/'.Safeurl::make($product->name)) }}" class="link_scheme_color_main">
            {{ $product->name }}
        </a>
    </li>
@endforeach

和AJAX：

$('.searchProduct').keydown(function(e) {
    var name = $(this).val();
    var inputData = $('.formSearchProduct').serialize();
    var prodList = $('.showProds');
    var countList = prodList.find('ul li').length;
    var prd = prodList.find('ul li');

    if(name.length === 0) {
        prodList.hide();
    } else {
        $.ajax({
            url: '{{ url('/store/product/search') }}',
            type: "POST",
            data: inputData
        })
        .done(function(m) {
            if (m) {
                prodList.show();
                prodList.find('ul.searchedProducts').html(m);
                prodList.find('ul li').first().addClass('activeProduct');
            } else {
                prodList.hide();
            }
        });
    }
});

css：

.activeProduct {background: #ccc !important;}

我已经使这个应用程序生效了。你可以查看它here。该应用程序仍处于开发阶段，尚未投入生产。

我想要达到的目标是：

当用户搜索产品时，他/她可以使用up和down箭头键导航搜索结果，点击任何结果，他/她应该去到产品页面。
当用户搜索并删除搜索关键字时，会显示所有产品，我不希望这样。

更新1：

我已添加此代码，似乎有一个错误，我不知道。错误是我只能在按下向下箭头键时移动到第二个列表项，在下一秒，它会移回到第一个列表项。

$('.searchProduct').keydown(function(e) {
    var prodList = $('.showProds');
    var countList = prodList.find('ul li').length;
    var prd = prodList.find('ul li');
    var active = prodList.find('ul li.activeProduct');

    console.log(e.keyCode);
    if (e.which === 40) {
        var next = active.removeClass('activeProduct').next('li');
        next = next.length > 0 ? next : $('li:eq(0)');
        next.addClass('activeProduct');
    }
});

更新2：

我已经在一定程度上开展工作了。我删除了更新1的代码，并将以下代码添加到done()方法。

if (m) {
    prodList.show();
    prodList.find('ul.searchedProducts').html(m);
    prodList.find('ul li').first().addClass('activeProduct');
    if(e.keyCode == 40) {
        prodList.find('ul li').prev().removeClass('activeProduct');
        prodList.find('ul li').next().first().addClass('activeProduct').focus();
    }
} else {
    prodList.hide();
}

但每次按下向下箭头键时，这只会移动到第二个列表项。您可以查看我上面提供的链接。

请帮助我解决这个问题。感谢。

在laravel 5中的电子商务中搜索功能

0 个答案: