jquery - 如何增加自动完成搜索栏建议列表项(目前8个需要增加到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 文档
更新 1
您是否曾经倾倒$data
过您NSearchController.php
并查看结果计数?
更新 2
你应该关心的另一件事:
在您使用的控制器中$request->input('name')
,这意味着您应该接收“名称”作为查询字符串;在您使用时$.get(path,{query:name}
,这是错误的。您应该将其更改为$.get(path,{name:query}
. 在您的代码中$request->input('name')
始终返回 null 并且 SQL 查询将返回您的所有产品名称;然后 typehead 会在你的前端过滤它们——</p>
更新 3
只需为items
属性设置另一个值。(默认为 8)
推荐阅读
- java - 如何在 C++ JNI 中定位 Kotlin 中的静态方法?
- python - 在没有重复的两个 numpy 数组之间找到最近对的最快方法
- php - 将数据从 react-native 发送到 laravel api 时出现特殊字符问题
- linux - 如何进行句子之间的比较并计算相似度?
- android - 如何防止设置活动立即保存所有更改?
- reactjs - 链接在 next.js 中无效,即使我在页面上
- javascript - Web API 获取请求正文未定义
- c# - 需要帮助将包含空格的 bbcode URL 转换为有效的降价
- telegraf - 如何在电报中检查插件状态?
- google-api - 我是否需要将每个测试用户添加到谷歌开发者控制台中未经验证的应用程序的用户列表中?