实现 Laravel/AJAX 搜索栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41771209/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Implement Laravel/AJAX search bar
提问by steven
Hello I can do a standard AJAX/PHP search but finding it hard to convert to Laravel. I'm using key up instead of button click. I'm not sure if this is the right way im going about to implement an ajax/laravel search bar. I'm looking to output the database data into the div in the view page, but need help on going about this. If anyone thinks im doing this wrong please advise me. Always willing to learn new code.
您好，我可以进行标准的 AJAX/PHP 搜索，但发现很难转换为 Laravel。我正在使用按键而不是按钮点击。我不确定这是否是我即将实现 ajax/laravel 搜索栏的正确方式。我希望将数据库数据输出到视图页面中的 div 中，但在这方面需要帮助。如果有人认为我做错了，请告诉我。总是愿意学习新代码。
Controller:
控制器：
<?php
namespace App\Http\Controllers;
use App\Patient;
use DB;
use Illuminate\Http\Request;
class PatientController extends Controller
{
public function search(Request $request) {
// get the search term
$text = $request->input('text');
// search the members table
$patients = DB::table('patients')->where('firstname', 'Like', $text)->get();
// return the results
return response()->json($patients);
}
}
Route:
路线：
Route::get('search', 'PatientController@search');
View:
看法：
@extends('Layout.master')
@section('content')
<!-- Ajax code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="application/javascript">
$(document).ready(function(){
$('#txtSearch').on('keyup', function(){
var text = $('#txtSearch').val();
$.ajax({
type:"GET",
url: '127.0.0.1:8000/search',
data: {text: $('#txtSearch').val()},
success: function(data) {
console.log(data);
}
});
});
});
</script>
<div style="margin-top:70px;"></div>
@include('partials._side')
<div class="container">
<form method="get" action="">
<div class="input-group stylish-input-group">
<input type="text" id="txtSearch" name="txtSearch" class="form-control" placeholder="Search..." >
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<div id="result"></div>
</div>
@endsection
采纳答案by meda
In your AJAXrequest change:
在您的AJAX请求更改中：
'127.0.0.1:8000/search'
to
到
'/search'
I suggest you to use jQuery Autocomplete
我建议你使用jQuery 自动完成
Very easy to set up.
非常容易设置。
回答by Matt Altepeter
Depending on your version of Laravel (new versions use this):
取决于你的 Laravel 版本（新版本使用这个）：
use Illuminate\Http\Request;
public function search(Request $request) {
$text = $request->input('text');
$patients = DB::table('patients')->where('firstname', 'Like', "$text")->get();
return response()->json($patients);
}
And then in javascript:
然后在javascript中：
$(document).ready(function(){
$('#txtSearch').on('keyup', function(){
var text = $('#txtSearch').val();
$.ajax({
type:"GET",
url: 'search',
data: {text: $('#txtSearch').val()},
success: function(response) {
response = JSON.parse(response);
for (var patient of response) {
console.log(patient);
}
}
});
});
});
回答by Mr Hoelee
If you mean handle result in browser, please check inside your AJAX coded with jQuery, "response" variable is the server coming back data. You just need to populate the returned data into your page after AJAX finished.
如果您的意思是在浏览器中处理结果，请检查使用 jQuery 编码的 AJAX 内部，“响应”变量是服务器返回数据。您只需要在 AJAX 完成后将返回的数据填充到您的页面中。
For example put into
例如放入
<div id="searchResult"></div>
You need put below inside your ajax after response coming back with jquery like:
在使用 jquery 返回响应后，您需要将其放入 ajax 中，例如：
$("#searchResult").html(response);
![Laravel 5.3 - 未找到 InvalidArgumentException 视图 [索引]](/res/img/loading.gif)