Jquery 如何增加自动完成搜索栏建议列表项（目前为8项，需要增加到16项）_Jquery_Laravel_Search_Autocomplete_Bootstrap Typeahead

Jquery 如何增加自动完成搜索栏建议列表项（目前为8项，需要增加到16项）

jquery laravel search autocomplete

Jquery 如何增加自动完成搜索栏建议列表项（目前为8项，需要增加到16项）,jquery,laravel,search,autocomplete,bootstrap-typeahead,Jquery,Laravel,Search,Autocomplete,Bootstrap Typeahead,我开发了一个搜索栏，可以从我的产品列表中搜索超过10000种产品。当用户键入word时，用户可以根据用户输入查看包含8项的建议列表。这是我的代码，代码工作得很好。但我想做的是增加建议列表。我不知道该怎么做。所以如果有人能帮我 Nsearch.blade.php <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.b

我开发了一个搜索栏，可以从我的产品列表中搜索超过10000种产品。当用户键入word时，用户可以根据用户输入查看包含8项的建议列表。这是我的代码，代码工作得很好。但我想做的是增加建议列表。我不知道该怎么做。所以如果有人能帮我

Nsearch.blade.php

    <!DOCTYPE html>
<html>
    <head>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
    </head>
<body>

<div class="container">
    <h1> test products </h1>
    <input type="text" class="typeahead form-control" name="name">
</div>
<script type="text/javascript">
var path = "{{route('nautocomplete')}}";
$('input.typeahead').typeahead({
    source:function(query,process){
        return $.get(path,{query:name},function (data) {
            return process(data);
        })
    }
});
</script>

</body>
</html>

    <?php

namespace App\Http\Controllers\Shop;
use App\Product;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class NSearchController extends Controller
{
    public function index(){

        return view('shop.Nsearch');
    }

    public function autocomplete(Request $request){
        $data = Product::select("name")
                ->where("name","LIKE","%{$request->input('name')}%")->get(); 
                return response ()->json($data);
    }
}

当前视图

我想这是你的前端问题

最终代码

$（'input.typeahead'）。typeahead({
项目：20，
来源：功能（查询、流程）{
返回$.get（路径，{name:query}，函数（数据）{
返回过程（数据）；
})
}
});

阅读本手册中的Bootstrap 3 Typeahead文档

更新1 您是否曾经在

NSearchController.php

中转储

$data

并查看结果计数

更新2 另一件你应该关心的事情：

在您的控制器中，您正在使用

$request->input（'name'）

，这意味着您应该将“name”作为查询字符串接收；当您使用

$.get（path，{query:name}

时，它是错误的。您应该将它更改为

$.get（path，{name:query}

。在您的代码中

$request->input（'name'）

始终返回null，SQL query将返回您的所有产品名称；然后，打字机将在前端对它们进行筛选–

更新3

只需将另一个值设置为

items

property。（默认值为8）

谢谢您的回复。但是添加此值会增加我的建议列表。我有

dd（）

result，它包含10多种产品。@NipunTharuksha另一件您应该注意的事情：在您的控制器中，您正在使用

$request->input（'name'））

，这意味着您将“name”作为查询字符串。当您使用

返回$.get（路径，{query:name}，函数（数据）

时，它是错误的。您应该在代码

$request->input（'name'）中将其重构为返回$.get（路径，{name:query}，函数（数据）

始终返回null，SQL query将返回您的所有产品名称，然后打字机将在您的计算机上过滤它们frontend@NipunTharuksha我更新了我的答案。我想你应该没问题。谢谢你的回答。如果你能发布一个链接，我可以在那里获得更多的详细信息this@NipunTharuksha没问题，伙计。

    Route::get ('/nsearch','Shop\NSearchController@index')->name('nsearch');
Route::get ('/nautocomplete', 'Shop\NSearchController@autocomplete')->name('nautocomplete');