laravel - Laravel 和 Typeahead.js 自动完成搜索 [JS 错误]
问题描述
我尝试创建一个自动完成搜索字段,用于填充数据库中的客户姓名。
这是我尝试过的:
搜索控制器:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Customers;
class SearchController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('jobs.create');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function autocomplete(Request $request)
{
$data = Customers::select("FirstName")
->where("FirstName","LIKE","%{$request->input('query')}%")
->get();
return response()->json($data);
}
}
这些是我的 SearchController 路线:
Route::get('jobs.create', 'SearchController@index')->name('search');
Route::get('autocomplete', 'SearchController@autocomplete')->name('autocomplete');
这是作业/创建视图中的代码:
<input type="text" id="username" class="form-control typeahead" placeholder="Type in customer's name...">
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
}
});
</script>
CDN的
<!-- jQuery & Typeahead.js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
这些是我在控制台中遇到的错误:
create:277 Uncaught TypeError: $(...).alert is not a function
at create:277
(anonymous) @ create:277
6bootstrap3-typeahead.min.js:1 Uncaught TypeError: b.toLowerCase is not a function
at b.matcher (bootstrap3-typeahead.min.js:1)
at bootstrap3-typeahead.min.js:1
at Function.grep (jquery.js:753)
at b.process (bootstrap3-typeahead.min.js:1)
at proxy (jquery.js:818)
at Object.success (create:309)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at A (jquery.min.js:4)
at XMLHttpRequest.<anonymous> (jquery.min.js:4)
任何人都可以指导我正确的方向。我做错了什么等等。
提前致谢。
解决方案
Typeahead js 期望像这样的数据,
[{"first_name_one"},{"first_name_two"},{"first_name_three"}];
但是你从服务器发送数据,
[{"first_name": "first_name_one"},{"first_name":"first_name_two"},{"first_name": "first_name_three"}];
如下更新您的方法,
public function autocomplete(Request $request)
{
$datas = Customers::select("FirstName")
->where("FirstName","LIKE","%{$request->input('query')}%")
->get();
$dataModified = array();
foreach ($datas as $data)
{
$dataModified[] = $data->FirstName;
}
return response()->json($dataModified);
}
推荐阅读
- java - 带有 testNG 资源和依赖项的 Java fatJar
- javascript - 使用输入字段中的数据填充确认/弹出框,并允许用户在 html 和 jquery 中进行编辑
- python - 运行 xgboost 算法给出编译错误
- node.js - Elasticsearch 创建连接字段(Nodejs)
- javascript - React-redux 正在分派一个 API 操作,当请求发送回 401 错误时
- svn - SVN 网页用户界面
- arrays - 从 Flutter 中的字符串写入 Firestore 中的数组
- javascript - 聚合不给出任何结果
- ios - textureGrad 函数 – 等效金属 (MSL)
- jquery - 使用 jQuery/getClientRects() 检测元素是否包装