Question

我的类别页面和产品页面中有一个名称和ID相同的搜索字段。自动填充建议似乎工作正常，但是一旦我点击搜索字段中的搜索建议，它就会将我的搜索字符串转换为整数这是我的产品ID。之后它将我重定向到“mysite / products id”，“没有这个菜单的内容”。我想问题是我的路线和我的JS中的window.location，但我无法弄明白。

这是我的代码

我的路线

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

与类别和产品相关的路线更少：

Route::get('shop', 'ShopController@categories');// my categories page

Route::get('shop/{category_url}', 'ShopController@products');  // my products page

我的AutoCompleteController：

  <?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
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=array();
        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和categories.blade中的视图是相同的：

@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.value
    } // not sure if this is the correct way , please advise
});  
      });
</script>

Answer 1

在autoComplete方法中：

    foreach ($products as $product) {
        // I guess you have product->cagegory relationship, and category model
        // has a URL?
        $category_url = $product->category->url; 
        $data[]=array('label'=>$product->title,'value'=>$category_url);
    }

现在您的自动填充结果包含category_url，因此您只需更新JS：

window.location = '{{ url("shop/" + ui.item.value) }}';

路线和window.location - Laravel

1 个答案: