我有一个搜索表单,用户可以在其中搜索产品。
搜索表单
<form class="navbar-form pull-right no_padding m_top_0 m_bottom_0 formSearchProduct" role="search" onsubmit="return false;" autocomplete="off">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="input-group p_xs_right_15 p_xs_left_15 p_sm_left_15 p_sm_right_15">
<input type="text" name="name" class="form-control m_xs_bottom_10 searchProduct" placeholder="Search Product" style="height: 24px; margin-top: 3px;">
<div class="showProds">
<ul class="searchedProducts" tabindex="0"></ul>
</div>
</div>
</form>
搜索控制器:
public function searchProduct(Request $request)
{
$productName = $request->input('name');
$products = Product::where('name', 'LIKE', '%' . $productName . '%')->get();
return view('partials.search', compact('products'));
}
search.blade.php
@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) {
//setTimeout(function() {
if (m) {
prodList.show();
prodList.find('ul.searchedProducts').html(m);
prodList.find('ul li').first().addClass('activeProduct');
} else {
prodList.hide();
}
//}, 500);
});
}
});
CSS
.activeProduct {background: #ccc !important;}
问题是当用户按下向下/向上箭头键时,类activeProduct
无法正常运行。它仅停留在第一个列表项。我跟着this tutorial但是失败了。
在学完本教程之后,我有了这个我尽我所能的代码:
$('.searchedProducts').keydown(function(e) {
var prodList = $('.showProds');
var countList = prodList.find('ul li').length;
var prd = prodList.find('ul li');
console.log(e.keyCode);
if (e.which === 40) {
var next = prd.removeClass('activeProduct').next('li');
next = next.length > 0 ? next : $('li:eq(0)');
next.addClass('activeProduct');
}
});
以上功能根本没有被解雇,我不知道原因。
我想要的是什么:
搜索产品后,在下拉列表中,用户应该可以使用向上/向下箭头键,当按下回车键时,应该将他/她带到产品页面。
非常感谢任何帮助。感谢。
答案 0 :(得分:0)
试试这个:
$('.searchedProducts').keydown(function(e) {
var prodList = $('.showProds');
var countList = prodList.find('ul li').length;
var prd = prodList.find('ul li');
// Note this line below
var active = prodList.find('ul li.activeProduct');
console.log(e.keyCode);
if (e.which === 40) {
// And this line
var next = active.removeClass('activeProduct').next('li');
next = next.length > 0 ? next : $('li:eq(0)');
next.addClass('activeProduct');
}
});
问题是您选择了所有列表项并删除了类activeProduct。下一个功能会尝试选择下一个列表项,但是您选择了所有这些列表项,这样您的代码就无法工作(如果我正确的话)。通过选择有效产品,我认为您的代码可以正常运行。
答案 1 :(得分:0)