我试图创建一个自动完成搜索字段,该字段填充数据库中的客户名称。
这是我尝试过的:
SearchController:
<?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)
任何人都可以引导我朝正确的方向前进。我做错了什么等等。
谢谢。
答案 0 :(得分:1)
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);
}