addClass 不适用于 laravel 5 中搜索功能的动态列表项答案

【问题标题】：addClass not working on dynamic list item on search functionality in laravel 5addClass 不适用于 laravel 5 中搜索功能的动态列表项
【发布时间】：2015-10-04 03:53:47
【问题描述】：

我有一个搜索表单，用户可以在其中搜索产品。

搜索表单

<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');
    }
});

上面的函数根本没有触发，不知道是什么原因。

我想要什么：

搜索产品后，在下拉列表中，用户应该可以使用上/下箭头键，当按下回车键时，应该将他/她带到产品页面。

非常感谢任何帮助。谢谢。

【问题讨论】：

我认为是在`var next = prd.removeClass('activeProduct').next('li');`这部分。你有一个活生生的例子，我可以测试它是否正确？
不，我没有任何实例，我正在本地机器上开发它。
亲爱的@Saiyan Prince，你找到解决方案了吗，同样的问题在这里。如果你解决了，请指导我。谢谢
@Raham 我已经发布了这个问题的解决方案，我会在一个小时后接受。你可以去尝试一下。

标签： php jquery css ajax laravel-5

【解决方案1】：

试试这个：

$('.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 类。下一个函数尝试选择下一个列表项，但您选择了所有这些项，所以这就是您的代码不起作用的地方（如果我是正确的）。通过选择活动产品，我认为您的代码将起作用。

【讨论】：

有点，但正如我所说，该函数根本没有被触发/触发。如果我将$('.searchedProducts') 更改为$('body')，它会起作用，但它会返回到第一个列表元素并添加activeProduct 类
改用$('.searchProduct')。这样做是在输入字段中收听事件，并使其成为您在 Google 搜索内容然后从下拉列表中选择结果时获得的体验。
不，它在跳转到第二个列表项后跳回第一个列表项，通过添加$('.searchProduct')

【解决方案2】：

我已经解决了。

我使用了一个名为 selectize.js 的 jquery 插件。

还有 here is the tutorial 在我的 Laravel 应用程序中实现它。

这是demo link。

【讨论】：