[英]How to increase Auto complete search bar suggestion list items(currently at 8 need to increase up-to 16)
我已经开发了一个搜索栏,可以从我的产品列表中搜索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');
目前来看
我认为这是您的前端问题。
$('input.typeahead').typeahead({
items: 20,
source: function(query,process){
return $.get(path,{name:query},function (data) {
return process(data);
})
}
});
阅读此链接中的 Bootstrap 3 Typeahead文档
您是否曾经在$data
NSearchController.php
转储$data
并查看结果计数?
您应该注意的另一件事:
在控制器中,您正在使用$request->input('name')
,这意味着您应该以查询字符串的形式接收'name'; 当您使用$.get(path,{query:name}
,这是错误的。应始终在代码$request->input('name')
中将其更改为$.get(path,{name:query}
。返回null,SQL查询将返回您所有的产品名称;然后,header将在您的前端对其进行过滤–
只需为items
属性设置另一个值。 (默认为8)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.