如何增加Auto complete search bar suggestion list items(目前8个需要增加到16个)
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 documentation in this link
更新 1
您是否曾将 $data
倾倒在 NSearchController.php
中并查看结果计数?
更新 2
另一件你应该关心的事情:
在您的控制器中,您正在使用 $request->input('name')
,这意味着您应该收到 'name' 作为查询字符串;当您使用 $.get(path,{query:name}
时,这是错误的。您应该将其更改为 $.get(path,{name:query}
。在您的代码中 $request->input('name')
总是 return null 并且 SQL 查询将 return 您所有的产品名称;然后 typehead 将在您的前端过滤它们 –
更新 3
只需将另一个值设置为 items
属性。 (默认为 8)
我开发了一个搜索栏来搜索我的产品列表中的项目,其中有超过 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 documentation in this link
更新 1
您是否曾将 $data
倾倒在 NSearchController.php
中并查看结果计数?
更新 2
另一件你应该关心的事情:
在您的控制器中,您正在使用 $request->input('name')
,这意味着您应该收到 'name' 作为查询字符串;当您使用 $.get(path,{query:name}
时,这是错误的。您应该将其更改为 $.get(path,{name:query}
。在您的代码中 $request->input('name')
总是 return null 并且 SQL 查询将 return 您所有的产品名称;然后 typehead 将在您的前端过滤它们 –
更新 3
只需将另一个值设置为 items
属性。 (默认为 8)