title: Laravel 5.3 impossible to put script on view (autocomplete field)
body: <p>I’m currently working on Laravel 5.3 for my internship.
  And as you guessed, I have an annoying issue let me explain it:</p>
  
  <p>On a page, I have to put an « autocomplete » field but It’s not working at all.
  I have this error I can’t solve: </p>
  
  <pre><code>[Vue warn]: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as &lt;script&gt;, as they will not be parsed. app.js:139
  </code></pre>
  
  <p>Furthermore, I need to keep the larvel « template » like the top bar with the login name, etc…</p>
  
  <p>I tried a lot of solutions found on the internet but nothing worked.
  I’m totally desperate, do you have any solutions ?
  ps: Sorry for the awful grammar, I'm french and I'm learning, thanks for your comprehension.</p>
  
  <p><strong><em>selectcr.blade.php</em></strong></p>
  
  <pre><code>@extends('layouts.app')
  
  @section('content')
  
  &lt;!DOCTYPE html&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-8 col-md-offset-2"&gt;
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-heading"&gt;Selection de Compte-Rendu&lt;/div&gt;
  
                  &lt;div class="panel-body"&gt; Selectionnez le client:
  
                    &lt;input  id="intervenant-name"  type="text" class="form-control pd-l-50" placeholder="Recherche par nom d'entreprise"&gt;
  
                    &lt;script src="{{asset('js/jquery-1.12.4.js')}}"&gt;&lt;/script&gt;
  
                    &lt;script src="{{asset('js/jquery-ui.js')}}"&gt;&lt;/script&gt;
  
                    &lt;script&gt;
                    (function () {
                        src = "/prefcard/maker-search-intervenant";
                        $("#intervenant-name").autocomplete({
                            source: function (request, response)
                            {
                                $.ajax({
                                    url: src,
                                            dataType: "json",
                                            data:
                                            {
                                                term: request.term
                                            },
                                            success: function (data)
                                            {
                                                response(data);
                                            }
                                });
                            },
                            min_length: 2,
                            select: function (event, ui)
                            {
                                    //console.log(ui.item.value);return false;
                                var test = ui.item.value ? ui.item.value : '';
                                if (test != '')
                                {
                                    var url = '/prefcard/maker-search-intervenant';
                                    var formAutocomplete = $('&lt;form action="' + url + '" method="post"&gt;' +
                                            '&lt;input type="hidden" name="_token" value="{{ csrf_token() }}"&gt;' +
                                            '&lt;input type="text" name="term" value="' + ui.item.value + '" /&gt;' +
                                            '&lt;/form&gt;');
                                    $('body').append(formAutocomplete);
                                    formAutocomplete.submit();
                                }
                              }
                        });
                    })();
                    &lt;/script&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  @yield('javascript')
  
  @endsection
  </code></pre>
  
  <p><strong><em>SelectCRController.php</em></strong></p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Controllers;
  
  use Illuminate\Http\Request;
  use DB;
  
  class SelectCRController extends Controller
  {
      /**
       * Create a new controller instance.
       *
       * @return void
       */
      public function __construct()
      {
          $this-&gt;middleware('auth');
      }
  
      /**
       * Show the application dashboard.
       *
       * @return \Illuminate\Http\Response
       */
      public function index()
      {
          return view('selectcr');
      }
  
      public function searchIntervenant(Request $request) {
  
          $query = $request-&gt;get('term', '');
  
          $results = DB::table('intervenant')-&gt;where('intervenantEntreprise', 'LIKE', '%' . $query . '%')-&gt;orWhere('intervenantFonction', 'LIKE', '%' . $query . '%')-&gt;take(5)-&gt;get();
  
          $data = array();
          foreach ($results as $result) {
              $data[] = array('value' =&gt; $result-&gt;intervenantEntreprise . ' ' . $result-&gt;intervenantEmail, 'id' =&gt; $result-&gt;id);
          }
          if (count($data))
              return $data;
          else
              return ['value' =&gt; 'No Result Found', 'id' =&gt; ''];
      }
  
      public function postSearchIntervenant(Request $request) {
          //Do whatever you want to search accordingly name and then return
          return view('dashboard')-&gt;with('intervenant', $intervenant);
      }
  }
  </code></pre>
  
  <p><strong><em>web.php</em></strong></p>
  
  <pre><code>&lt;?php
  
  /*
  |--------------------------------------------------------------------------
  | Web Routes
  |--------------------------------------------------------------------------
  |
  | This file is where you may define all of the routes that are handled
  | by your application. Just tell Laravel the URIs it should respond
  | to using a Closure or controller method. Build something great!
  |
  */
  
  Route::get('/', function () {return view('welcome');});
  
  Auth::routes();
  
  Route::get('/home', 'HomeController@index');
  Route::get('/configuration', 'ConfigurationController@index');
  
  Route::get('/selectcr', 'SelectCRController@index');
  Route::get('/prefcard/maker-search-intervenant', 'SelectCRController@searchIntervenant');
  Route::post('/prefcard/maker-search-intervenant', 'SelectCRController@postSearchIntervenant');
  
  Route::get('/intervenant', function () {return view('intervenant');});
  Route::get('/api/intervenant/{id?}', 'IntervenantController@index');
  Route::post('/api/intervenant', 'IntervenantController@store');
  Route::post('/api/intervenant/{id?}', 'IntervenantController@update');
  Route::delete('/api/intervenant/{id?}', 'IntervenantController@destroy');
  
  Route::get('/utilisateur', function () {return view('utilisateur');});
  Route::get('/api/utilisateur/{id?}', 'UtilisateurController@index');
  Route::post('/api/utilisateur', 'UtilisateurController@store');
  Route::post('/api/utilisateur/{id?}', 'UtilisateurController@update');
  Route::delete('/api/utilisateur/{id?}', 'UtilisateurController@destroy');
  
  Route::post('register', 'Auth\RegisterController@register');
  
  //Route::auth();
  </code></pre>
  
  <p><strong><em>app.blade.php</em></strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;!-- CSRF Token --&gt;
      &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
  
      &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;/title&gt;
  
      &lt;!-- Styles --&gt;
      &lt;link href="/css/app.css" rel="stylesheet"&gt;
  
      &lt;!-- Scripts --&gt;
      &lt;script&gt;
          window.Laravel = &lt;?php echo json_encode([
              'csrfToken' =&gt; csrf_token(),
          ]); ?&gt;
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="app"&gt;
          &lt;nav class="navbar navbar-default navbar-static-top"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
  
                      &lt;!-- Collapsed Hamburger --&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse"&gt;
                          &lt;span class="sr-only"&gt;Toggle Navigation&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
  
                      &lt;!-- Branding Image --&gt;
                      &lt;a class="navbar-brand" href="{{ url('/') }}"&gt;
                          {{ config('app.name', 'Laravel') }}
                      &lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div class="collapse navbar-collapse" id="app-navbar-collapse"&gt;
                      &lt;!-- Left Side Of Navbar --&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &amp;nbsp;
                      &lt;/ul&gt;
  
                      &lt;!-- Right Side Of Navbar --&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;!-- Authentication Links --&gt;
                          @if (Auth::guest())
                              &lt;li&gt;&lt;a href="{{ url('/login') }}"&gt;Login&lt;/a&gt;&lt;/li&gt;
                          @else
                              &lt;li class="dropdown"&gt;
                                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;
                                      {{ Auth::user()-&gt;name }} &lt;span class="caret"&gt;&lt;/span&gt;
                                  &lt;/a&gt;
  
                                  &lt;ul class="dropdown-menu" role="menu"&gt;
                                      &lt;li&gt;
                                          &lt;a href="{{ url('/logout') }}"
                                              onclick="event.preventDefault();
                                                       document.getElementById('logout-form').submit();"&gt;
                                              Logout
                                          &lt;/a&gt;
  
                                          &lt;form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;"&gt;
                                              {{ csrf_field() }}
                                          &lt;/form&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                          @endif
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
          @yield('content')
      &lt;/div&gt;
  
      &lt;!-- Scripts --&gt;
      &lt;script src="/js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong><em>UPDATE</em></strong></p>
  
  <p>Now and with some modifications the error disappeared but the scripts are not working at all.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  @extends('layouts.app')
  
  @section('content')
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-8 col-md-offset-2"&gt;
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-heading"&gt;Selection de Compte-Rendu&lt;/div&gt;
  
                  &lt;div class="panel-body"&gt; Selectionnez le client:
                    &lt;input  id="intervenant-name"  type="text" class="form-control pd-l-50" placeholder="Recherche par nom d'entreprise"&gt;
  
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  @endsection
  
  @section('scripts')
  &lt;script src="{{asset('js/jquery-1.12.4.js')}}"&gt;&lt;/script&gt;
  &lt;script src="{{asset('js/jquery-ui.js')}}"&gt;&lt;/script&gt;
  &lt;script&gt;
  (function () {
      src = "/prefcard/maker-search-intervenant";
      $("#intervenant-name").autocomplete({
          source: function (request, response)
          {
              $.ajax({
                  url: src,
                          dataType: "json",
                          data:
                          {
                              term: request.term
                          },
                          success: function (data)
                          {
                              response(data);
                          }
              });
          },
          min_length: 2,
          select: function (event, ui)
          {
                  //console.log(ui.item.value);return false;
              var test = ui.item.value ? ui.item.value : '';
              if (test != '')
              {
                  var url = '/prefcard/maker-search-intervenant';
                  var formAutocomplete = $('&lt;form action="' + url + '" method="post"&gt;' +
                          '&lt;input type="hidden" name="_token" value="{{ csrf_token() }}"&gt;' +
                          '&lt;input type="text" name="term" value="' + ui.item.value + '" /&gt;' +
                          '&lt;/form&gt;');
                  $('body').append(formAutocomplete);
                  formAutocomplete.submit();
              }
            }
      });
  })();
  &lt;/script&gt;
  @endsection
  
  @yield('javascript')
  </code></pre>