Авто в комплекте с Laravel 5.2
У меня уже есть функциональное окно поиска на моем веб-сайте, но я хочу реализовать функцию автозаполнения для моей панели поиска. Я знаю, что есть множество плагинов, таких как typeahead и т. Д. Я хотел бы реализовать typeahead или Виджет автозаполнения jQuery, если вы, ребята, знаете, как. Я видел некоторые учебники, но они не работают для кода, который у меня есть. Я покажу вам лезвие, контроллер и маршрут, который у меня есть для моего окна поиска.
Как я могу загрузить все мои данные из моей базы данных в поле источника в плагине jQuery? Я хотел бы загрузить название листовки, например?
show.blade.php:
@extends('home')
@section('content')
<div id="the-basics">
<input class="typeahead" type="text" placeholder="Title">
</div>
@stop
@section('scripts.footer')
<script type="application/javascript" src="{{ URL::asset('/src/public/js/typeahead.js') }}"></script>
<script>
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'title',
source: 'travelflyers/search'
});
</script>
@stop
TravelFlyersController.php:
class TravelFlyersController extends Controller {
// Other functions here...
public function search() {
$keyword = Input::get('keyword');
$flyers = Flyer::where('title', 'LIKE', '%' .$keyword. '%')->get();
return \Response::json($flyers);
}}
Маршрут:
Route::group(['middleware' => ['web']], function () {
/** Resource Route For Travel Flyers */
Route::resource('travelflyers', 'TravelFlyersController');Route::post('travelflyers/search',[
'uses' => '\App\Http\Controllers\TravelFlyersController@search',
'as' => 'travelflyers.search',
]);});
Решение
Если вы используете typehead, почему вы добавляете форму и отправляете кнопку, вы должны поместить только текстовое поле с идентификатором. гарнитура работает как AJAX, когда вы вводите слово AJAX
запрос к вашему контроллеру и получите результат
<div id="the-basics">
<input class="typeahead" type="text" placeholder="Title">
</div>
<script>
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: 'travelflyers/search'
});
</script>
и убедитесь, что ваш контроллер возвращает данные JSON, не возвращают представление, это должны быть данные json, используйте var_dump в вашем контроллере и проверьте из инструмента разработки браузера, что это json или нет
Другие решения
В вашем методе автозаполнения в jquery сделайте вызов с Ajax, чтобы получить данные из вашей базы данных через контроллер. Если вы не знакомы с Ajax, вам придется потратить некоторое время на обучение. Вот грубый пример, чтобы показать вам, как все будет работать.
searchUrl ='http://www.yourwebsite.com/travelflyers/search'
$( "#autocomplete" ).autocomplete({
$.ajax({url: searchUrl, success: function(flyers){
source: flyers;
});
Это не точный пример, но я надеюсь, что вы поймете идею.
измените маршруты, чтобы получить метод и передать переменную запроса
Route::get('travelflyers/search/{query}',[
'uses' => '\App\Http\Controllers\TravelFlyersController@search',
'as' => 'travelflyers.search',
]);
по вашему мнению
<script src="https://twitter.github.io/typeahead.js/js/jquery-1.10.2.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<div id="remote">
<input class="typeahead" type="text" placeholder="Search Travel Flyers Here">
</div>
<script>
var bestPictures = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/travelflyers/search/%QUERY',
wildcard: '%QUERY'
}
});
$('#remote .typeahead').typeahead(null, {
name: 'best-pictures',
display: 'title',
source: bestPictures
});
</script>
в вашем контроллере
public function search($query) {
$flyers = Flyer::select('title')->where('title', 'LIKE', '%' .$query. '%')->get();
return $flyers;
}
его еще нет, потому что я просто копирую и вставляю из официальной документации, я уже пробую этот код, и он работает ..
Попробуйте это в вашем Файл маршрутов использование GET вместо POST
Route::get('travelflyers/search',[
'uses' => '\App\Http\Controllers\TravelFlyersController@search',
'as' => 'travelflyers.search',
]);