在Laravel中使用Ajax调用(Json)自动完成，无响应 [英] Autocomplete with ajax call(Json) in laravel, no response

问题描述

我认为:

<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="">

控制器:

<?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);
}
}

我的路线:

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

我的问题是，当我在输入标签中输入超过3个字母时，我什么也没得到，这似乎是带有q id的输入未填充值.如果我确实使用提交"按钮添加了表单/动作/方法，则控制器可以正常工作，因此问题出在此ajax调用中，无法正常工作.

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.

有人在想为什么这不能正常工作(也许ajax调用不能正确路由或类似这样的东西)?

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

最终解决方案归功于stack和Borna:

查看:

  <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>

控制器:

<?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::get('/autocomplete', array('as' => 'autocomplete', 'uses'=>'Theme@autocomplete')); //Instead of Theme your Controller name

推荐答案

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

在控制器中 使用return response()->json($results);而不是返回Response :: json($ results);

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);


          }

      });


   });

在控制器中

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);

  }

在模型中

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'];
}

这篇关于在Laravel中使用Ajax调用(Json)自动完成，无响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！