簡體   English   中英

在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調用中,該調用無法正常工作。

有什么想法為什么這不能正常工作(也許ajax調用不能正確路由或類似這樣的東西)?

最終解決方案感謝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);

自動完成的另一個代碼

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

路線

Route::post('search/autocomplete', 'messagesController@autocomplete');

HTML

<div class="form-group">
        {!! Form::label('To', 'To:', ['class' => 'col-lg-2 control-label']) !!}
        <div class="col-lg-10">
            {!! Form::text('To', $value = null, ['class' => 'form-control', 'placeholder' => 'To']) !!}
        </div>
    </div>

腳本

  <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>
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <script type="text/javascript">

   $(document).ready(function(){
    src = "search/autocomplete";

$( "#To" ).autocomplete({
source: function(request, response) {
        $.ajax({
            headers: {
                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            type: 'POST',
            url: src,
            data: {
                term : request.term
            },
            success: function(data) {
                response(data);

            }
        });
    },
    minLength: 3,
select: function(event, ui) {
  $('#To').val(ui.item.value);
}
 });

    });
  <script>

調節器

public function autocomplete(){
$term = Input::get('term');

$results = array();

$queries = DB::table('rusers')
    ->where('name', 'LIKE', '%'.$term.'%')
    ->take(5)->get();

foreach ($queries as $query)
{
    $results[] = [ 'id' => $query->id, 'value' => $query->name ];
}
return response()->json($results);
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM