自动完成搜索在 Laravel 中不起作用

Question

我的类别页面和产品页面中有一个具有相同名称和 ID 的搜索字段。自动完成建议似乎工作正常，但是一旦我在搜索字段中单击请求的产品，它就会停留在同一页面上而不是将我重定向到视图。我希望​​我的视图仅显示产品。到目前为止，这是我的代码：

更新后

我的路线：

<?php

Route::get('products/{id}', 'AutoCompleteController@show');
Route::get('autocomplete', array('as' => 'autocomplete', 'uses' => 'AutoCompleteController@show'));
Route::get('searchajax', array('as' => 'searchajax', 'uses' => 'AutoCompleteController@autoComplete')); 

我的自动完成控制器：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\MainController;
use App\Product;

class AutoCompleteController extends MainController
{
    public function show(Product $product)
    {
        return view('content.products', ['product' => $product]);
    }

    public function autoComplete(Request $request)
    {
        $query = $request->get('term', '');

        $products = Product::where('title', 'LIKE', '%' . $query . '%')->get();

        $data = [];
        foreach ($products as $product) {
            $data[] = array('label' => $product->title, 'value' => $product->id);
        }
        if (count($data)) {
            return $data;
        } else {
            return ['value' => 'No Result Found', 'id' => ''];
        }
    }
}

我在 products.blade.php 和 categories.blade.php 中的自动完成搜索视图是相同的：

@extends('master')
@section('content')
    <link href="http://demo.expertphp.in/css/jquery.ui.autocomplete.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <div class="row">
        <form class="navbar-form text-center " form method="GET" action=" ">
            <input id="search_text" placeholder=" Search products" name="search_text" type="text" value=""
                   style="width: 400px; height: 35px; border-radius: 5px ; padding-left: 12px;"><br><br>
            <input class="btn btn-default " type="submit" value="  Search">
        </form>
    </div>

    <script>
        $(document).ready(function () {
            src = "{{ route('searchajax') }}";
            $("#search_text").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: src,
                        dataType: "json",
                        data: {
                            term: request.term
                        },
                        success: function (data) {
                            response(data);
                        }
                    });
                },
                minLength: 3,
                select: function (event, ui) {
                    window.location = '{{ url('shop/{category_url}')}}' + ui.item.id
                } // not sure if this is the correct way , please advise
            });
        });
    </script>
@endsection

Answer 1

如果您认为是 JS 冲突的问题，请尝试以下代码：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

也添加了缺少的 ui css。让我知道结果。

Answer 2

有几个问题：

• 自动完成响应应包括 label 和 value 对，您将返回 value 和 id。请参阅jQuery UI source docs。

• 您的 Javascript 缺少 select 事件处理程序，该处理程序指定选择其中一个建议时会发生什么。所以现在点击一个只会在输入字段中填充点击的值。请参阅jQueryUI autocomplete select docs。

也许您希望在浏览到/products/1 时能够查看产品 ID 1。首先，您需要为此设置路线：

Route::get('products/{id}', 'AutoCompleteController@index');

然后在您的控制器中，首先修复自动完成响应以返回正确的格式：

foreach ($products as $product) {
    $data[]=array('label'=>$product->title,'value'=>$product->id);
}

接下来，仍然在控制器中，更新显示您的产品的方法（顺便说一句，这可能应该称为show，index 通常是产品列表：

use App\Product;

class AutoCompleteController extends MainController {

    // This assumes you have a Product model
    public function index(Product $product) {
        return view('content.products', ['product' => $product]);
    }

还有你的 Javascript：

$("#search_text").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: src,
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
                response(data);

            }
        });
    },
    minLength: 3,
    select: function( event, ui ) {
        // Your autoComplete response returns the ID in the 'value' field
        window.location = 'http://yoursite.com/products/' + ui.item.value
    }
});