DomainFlag DomainFlag - 3 months ago 24
Ajax Question

Autocomplete with ajax call(Json) in laravel, no response

I have the view:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<script>

$(function()
{
$( "#q" ).autocomplete({
source : "{{ url('search/autocomplete') }}",
minLength: 3,
select: function(event, ui) {
$('#q').val(ui.item.value);
}
});
});
</script>

<input id="q" placeholder="Search users" name="q" type="text" value="">


Controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\NewTheme;
use App\Http\Requests;
use DB;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Input;
use Auth;
use Response;

class SearchController extends Controller
{
public function autocomplete(){
$term = Input::get('term');

$results = array();

// this will query the users table matching the TagName

$queries = DB::table('New_Themes')
->where('TagName', 'like', '%'.$term.'%')
->take(5)->get();

foreach ($queries as $query)
{
$results[] = ['value' => $query->TagName];
}
return Response::json($results);
}
}


And my route:

Route::get('search/autocomplete', 'SearchController@autocomplete');


My problem is that when I type more then 3 letters in input tag I don't get anything, which seems that input with q id isn't filled with the values. If I do add the form/action/method thing with submit button the controller works fine, so the problem is in this ajax call which doesn't work properly.

Any thoughts why this isn't working properly(maybe it the ajax call doesn't get properly to route or something like this)?

FINAL SOLUTION thanks to stack and Borna:

View:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<input type="text" class="form-control" placeholder="TagName" id="searchname" name="TagName">

<script type="text/javascript">
$('#searchname').autocomplete({
source:'{!!URL::route('autocomplete')!!}',
minlength:1,
autoFocus:true,
select:function(e,ui)
{
$('#searchname').val(ui.item.value);
}
});
</script>


Controller:

<?php

namespace App\Http\Controllers;
use \Illuminate\Http\Request;
use App\NewTheme; //Instead of NewTheme, your model name
use Input;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use DB;

class Theme extends Controller { //Instead of Theme your own controller name
public function autocomplete(Request $request)
{
$term = $request->term;

$queries = DB::table('New_Themes') //Your table name
->where('TagName', 'like', '%'.$term.'%') //Your selected row
->take(6)->get();

foreach ($queries as $query)
{
$results[] = ['id' => $query->id, 'value' => $query->TagName]; //you can take custom values as you want
}
return response()->json($results);
}
}


Route:

Route::get('/autocomplete', array('as' => 'autocomplete', 'uses'=>'Theme@autocomplete')); //Instead of Theme your Controller name

Answer
$( "#q" ).autocomplete({
    source : "{!!URL::route('search/autocomplete')!!}",
    minLength: 3,
    select: function(event, ui) {
      $('#q').val(ui.item.value);
    }

in controller use return response()->json($results); instead of return Response::json($results);

another code for autocomplete In view

<input type="text" name="searchname" class="form-control" id="searchname" placeholder="search" />

$(document).ready(function () {

      $('#searchname').autocomplete({


          source:'{!!URL::route('autocomplete')!!}',

          // source:"{{ URL::to('autocomplete')}}",
          minlength:1,
          autoFocus:true,
          select:function(e,ui)
          {
              alert(ui);


          }

      });


   });

in controller

public function autocomplete(Request $request)
{

      $term=$request->term;
      $data=PaymentInvoice::where('invoice_number','LIKE','%'.$term.'%')->take(10)->get();
      //var_dump($data);

      $results=array();


      foreach ($data as $key => $v) {

          $results[]=['id'=>$v->id,'value'=>$v->invoice_number." Project Name: ".$v->project_name." Amount: ".$v->amount];

      }

      return response()->json($results);

  }

In model

class PaymentInvoice extends Model
{
    //

    protected $table='payment_invoice';
    protected $fillable=['project_name','invoice_number','date','paid_to','prepared_by','amount','invoice_details_id','created_at'];
}