Php addClass不处理laravel 5中搜索功能的动态列表项
我有一个搜索表单,用户可以在其中搜索产品 搜索表单Php addClass不处理laravel 5中搜索功能的动态列表项,php,jquery,css,ajax,laravel-5,Php,Jquery,Css,Ajax,Laravel 5,我有一个搜索表单,用户可以在其中搜索产品 搜索表单 <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() }}">
<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>
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
css
.activeProduct {background: #ccc !important;}
问题在于,当用户按下向下/向上箭头键时,类activeProduct
无法正常工作。它只停留在第一个列表项。我跟随了,但失败了
在完成本教程之后,我已尽力编写了以下代码:
$('.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');
}
});
上面的函数根本没有被激活,我不知道原因
我想要什么:
搜索产品后,在下拉列表中,用户应能够使用向上/向下箭头键,当按下enter按钮时,应将其带到产品页面
非常感谢您的帮助。谢谢。试试这个:
$('.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类。下一个函数尝试选择下一个列表项,但您的选择中包含了所有列表项,因此这就是代码不起作用的地方(如果我正确的话)。通过选择活动产品,我认为您的代码将起作用。我已经解决了这个问题
我使用了一个名为jquery的jquery插件
我随后在我的Laravel应用程序中实现了这一点
以下是。我想它在'var next=prd.removeClass('activeProduct').next('li');'这部分。你有没有一个活生生的例子,我可以测试它是否正确?没有,我没有任何活生生的例子,我正在我的本地机器上开发它。亲爱的@Saiyan Prince,你找到解决方案了吗,同样的问题在这里。如果你修复了它,请指导我。谢谢you@Raham我已经发布了这个问题的解决方案,一小时后我将接受。。你可以去尝试一下。它有点过时了,但正如我所说的,这个函数根本没有被触发/触发。如果我将
$('.searchedProducts')
更改为$('body')
,它会运行,但会返回到第一个列表元素,并添加activeProduct
classTry$('.searchProduct')
。这样做的目的是在输入字段中收听事件,让它成为您在Google搜索某个内容时获得的体验,然后从下拉列表中选择结果。不,它在转到第二个列表项后,通过添加,$('.searchProduct')
$('.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');
}
});
$('.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');
}
});