I am using Laravel 5.2.
here is my code
//for header
<head>
<script type="text/javascript" src="{{ URL::asset('src/js/jquery-1.10.2.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('src/js/jquery-ui.js') }}"></script>
<link rel="stylesheet" href="{{ URL::to('src/css/jquery-ui.css') }}">
</head>
//body
<div class="col-sm-6 feature" >
<div class="ui-widget">
<label for="skills">Skills: </label>
<input type="text" class="search_keyword" id="skills" placeholder="Search.." name="skills" />
</div>
<script>
$(function() {
$( "#skills" ).autocomplete({
source: "{{URL::route('auto')}}"
//source: ["a","b"]
});
});
</script>
</div><!-- end feature -->
//route
Route::get('/', function () {
return view('welcome');
});
Route::get('/auto', [
'uses' => 'SearchController#AutoSug',
'as' => 'auto'
]);
//controller
class SearchController extends Controller
{
public function AutoSug()
{
$auto_s = DB::table('skills')
->pluck('skill');
return response()->json($auto_s);
}
}
Now problem is when I browse manually the link {{URL::route('auto')}} which says as here json view
So the problem is it does not give as it should be see here
main view
But if I change the code "{{URL::route('auto')}}" to source: ["a","b"]. It outputs properly. So where might be the problem ?
So here is the solution.
For javascript please write as follows
$(function()
{
$( "#q" ).autocomplete({
source: "{{URL('auto')}}",
minLength: 1,
select: function(event, ui) {
$( "#q" ).val(ui.item.value);
}
});
});
For controller please add as follows
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Input;
use App\Product;
use DB;
class SearchController extends Controller
{
public function autoComplete()
{
$term = Input::get('term');
$results = array();
$queries = DB::table('skills')
->where('skill', 'LIKE', '%'.$term.'%')
->take(9)->get();
foreach ($queries as $query)
{
$results[] = [ 'id' => $query->ID, 'value' => $query->skill];
}
return response()->json($results);
}
}
The problem was in controller it was getting null value for get variable and query builder was returning all the result from the database.I have added a library and associate variable as follows and solved the issue.
use Illuminate\Support\Facades\Input;
$term = Input::get('term');
Hope it will help others for same issue.
I hope the following links will be helpful.
https://gist.github.com/imranismail/10200241?signup=true
https://gist.github.com/manoj-nandakumar/11beb90916dfbdc6af7a
Related
I'm using typescript for the autocomplete search, and as a result I get the name of the value. But in my case I need to get the ID of that value, not the name. Since I'm a newcomer to typescript it's hard for me to make it work. How can I achieve that?
Input:
<input type="text" id="head_id" name="head_id" class="form-control" placeholder="Head is...">
Libraries that I use:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
Script:
<script type="text/javascript">
var route = "{{ url('autocomplete-search') }}";
$('#head_id').typeahead({
source: function (query, process) {
return $.get(route, {
query: query
}, function (data) {
return process(data);
});
}
});
</script>
Function in the controller:
public function search(Request $request){
$query = $request->get('query');
$filterResult = Employee::where('name', 'LIKE', '%'. $query. '%')->get();
return response()->json($filterResult);
}
I want to make a autocomplete function on my input with existing titles from database, but seems that doesn't work. I don't know what's the problem but when I try to write something, notting happens.
Here is my controller
public function search()
{
return view('search-me');
}
public function autocomplete(Request $request)
{
$data = Models::select("email")->where("email", "LIKE","%{$request->input("query")}%")->get();
return response()->json($data);
}
Here is my route
Route::get('search-me', array('as' => 'search', 'uses' => 'AdminNewsController#search'));
Route::get('autocomplete',array('as' => 'autocomplete', 'uses' => 'AdminNewsController#autocomplete'));
Here is my view
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></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</h1>
<input type="text" class="typeahead form-control">
</div>
</body>
<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>
</html>
I'm using Laravel 5.2 but I guess is working on mine too. Here is the tutorial : https://www.youtube.com/watch?v=3AiMsvobceY
Is it possible to pass a variable from controller to vuejs? I have read some answers but nothing seems to work for me. I want to pass the variable $url to vue. I have tried some thing like this
var url = {!! $url !!}; this gives me syntax error: unexpected token in app.js
example url http://eventregistry.org/json/suggestConcepts?prefix=sam&lang=eng&callback=JSON_CALLBACK
Controller
class SearchCompanyName extends Controller
{
public function getcompanyname($name)
{
return "http://eventregistry.org/json/suggestConcepts?prefix=" . $name . "&lang=eng&callback=JSON_CALLBACK";
}
public function index()
{
$url = $this->getcompanyname(Input::get("company_name_by_user"));
return view('searchcompany', ['url' => $url]);
}
}
vue app.js
Vue.component('search', require('./components/Searchnames.vue'));
const search = new Vue({
el: '#search',
data: {
},
method: {
getMessages: function(){
console.log('I am here')
}()
}
});
blade template
#section('content')
<div class="container">
{!! $url !!}
<search></search>
</div>
#endsection
If you want to declare your javascript variable in a script tag within a blade file, you need to put the variable in quotes like so
<script>
var url = '{{ $url }}';
</script>
You can use this package : https://github.com/laracasts/PHP-Vars-To-Js-Transformer
public function index()
{
JavaScript::put([
'foo' => 'bar',
'user' => User::first(),
'age' => 29
]);
return View::make('hello');
}
I have an $.post() and i want receive the data into my controller, how could i do that?
jQuery
$.post($('#url').val() + "Dashboard/getApi", { name: "John", time: "2pm" })
.done(function( data ) {
alert( "Data Loaded: " + data );
});
vvvvvvvvvvvvvvvvvvv this is my url vvvvvvvvvvvvvv
$('#url').val() + "Dashboard/getApi" = "http://127.0.0.1/M2MWare/Dashboard/getApi"
And this is my controller
function getApi()
{
$valores = $this->input->post();
// print_r($valores);
return json_encode($valores);
}
this returns me an empty array, i tried with different url, data and nothing why?
Codeigniter 3.1.0 running on WampServer.
The Dashboard Controller
<?php
defined('BASEPATH') OR exit( 'No direct script access allowed' );
class Dashboard extends CI_Controller {
public function __construct() {
parent::__construct();
}
public function index() {
$this->load->view('post_view');
}
function getApi() {
$valores = $this->input->post();
echo json_encode($valores);
}
}
The View post_view.php This is Very Bare Bones for simplicity.
<html lang="en">
<head>
<title>Post Me</title>
</head>
<body>
<form>
<input type="hidden" id="url" value="http://ci310tut.com/">
</form>
<script src="<?= base_url('assets/js/jquery.min.js'); ?>"></script>
<script>
$(document).ready(function () {
console.log('We should be seeing an alert popup');
$.post($('#url').val() + "Dashboard/getApi", {name: "John", time: "2pm"})
.done(function (data) {
alert("Data Loaded: " + data);
});
});
</script>
</body>
</html>
And from the above I get an alert screaming at me each time I perform a page refresh with the provided data being displayed.
So you might want to check the above against what you have.
am trying to retrieve data from a database using vuejs ajax call with a plugin called vue-resource. Unfortunately, the json data object contains the html page and not the actual data from the database. Can someone please tell me what am doing wrong?
This is my code:
routes.php
<?php
Route::get('find', 'FruitsCtrl#index');
fruitsctrl.php (controller)
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Fruit;
use App\Http\Requests;
use App\Http\Controllers\Controller;
class FruitsCtrl extends Controller
{
public function index(Request $req){
$fruits = Fruit::all();
return view('fruitsHome', $fruits);
}
}
fruit.php (model)
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Fruit extends Model
{
protected $fillable = [
'id', 'name', 'type'
];
}
fruitshome.blade.php (view)
<head>
<meta id="token" content="{{ csrf_token() }}">
</head>
<body>
<div class="row" id="vapp">
<ul>
<li v-for="fruit in fruits">
#{{ fruit.name }}
#{{ fruit.type }}
</li>
</ul>
</div>
<body>
app.js (javascript)
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');
var v = new Vue({
el : "#vapp",
ready :function () {
this.fetchFruits();
},
data : {
fruit : {id:'', name:'', type:''},
fruits : []
},
methods : {
fetchFruits : function(){
this.$http.get('/find').then(function(res){
this.fruits = res;
},function (data){
console.log(error ...);
});
}
}
});
You're currently returning a view from your controller:
class FruitsCtrl extends Controller
{
public function index(Request $req){
$fruits = Fruit::all();
return view('fruitsHome', $fruits);
}
}
Instead, you can return the Eloquent results directly and they'll be output as JSON:
class FruitsCtrl extends Controller
{
public function index(Request $req){
$fruits = Fruit::all();
return $fruits;
}
}
I think you need to set table name in the model like this :
class Fruit extends Model
{
protected $table = 'fruits';
protected $fillable = [
'id', 'name', 'type'
];
}
You also need to update index method like this :
public function index(Request $req){
$fruits = Fruit::all();
return view('fruitsHome')->withFruits($fruits);
}
and finally update the blade :
<li v-for="fruits in fruit">
#{!! $fruits->name !!}
#{!! $fruits->type !!}
</li>
Let me know if it helps you