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

【问题标题】：How to increase Auto complete search bar suggestion list items(currently at 8 need to increase up-to 16)如何增加自动完成搜索栏建议列表项（目前8个需要增加到16个）
【发布时间】：2020-01-18 23:29:42
【问题描述】：

我开发了一个搜索栏，可以从我的产品列表中搜索超过 10,000 种产品的项目。当用户键入一个单词时，用户可以看到基于用户输入的 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>

NSearchController.php

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

web.php（路由）

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

当前视图

【问题讨论】：

标签： jquery laravel search autocomplete bootstrap-typeahead

【解决方案1】：

我认为这是您的前端问题。

最终代码

$('input.typeahead').typeahead({
        items: 20,
        source: function(query,process){
            return $.get(path,{name:query},function (data) {
                return process(data);
            })
        }
    });

阅读 link 中的 Bootstrap 3 Typeahead 文档

更新 1

您是否曾经将 $data 转储到您的 NSearchController.php 并查看结果数？

更新 2

你应该关心的另一件事：

在您使用$request->input('name') 的控制器中，这意味着您应该接收“名称”作为查询字符串；当您使用$.get(path,{query:name} 时，这是错误的。您应该将其更改为$.get(path,{name:query}。在您的代码$request->input('name') 中始终返回 null 并且 SQL 查询将返回您的所有产品名称；然后 typehead 会在你的前端过滤它们——

更新 3

只需为items 属性设置另一个值。（默认为 8）

【讨论】：

感谢您的回复。但是添加这个剂量会增加我的建议列表。我有dd() 结果，它包含超过 10 种产品。
@NipunTharuksha 你应该关心的另一件事：在你的控制器中你使用$request->input('name')，这意味着你有'name'作为查询字符串。当您使用return $.get(path,{query:name},function (data) 时，这是错误的。你应该把它重构为return $.get(path,{name:query},function (data)。在您的代码$request->input('name') 中始终返回 null 并且 SQL 查询将返回您的所有产品名称，然后 typehead 将在您的前端过滤它们
@NipunTharuksha 我更新了我的答案。我想你应该没事。
感谢您的回答。如果可以，请发布一个链接，我可以在其中获得更多详细信息
@NipunTharuksha 没问题，伙计。 github.com/bassjobsen/Bootstrap-3-Typeahead