no backspace on readonly auto-complete

app/Models/TitleTranslation.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+// models/CountryTranslation.php
+class TitleTranslation extends Model
+{
+    public $timestamps = false;
+    protected $fillable = ['title', 'description'];
+    protected $guarded = ['id'];
+}

resources/assets/js/components/MyAutocomplete.vue

@@ -2,7 +2,7 @@
 https://alligator.io/vuejs/vue-autocomplete-component/ -->
 <template>
     <div style="position:relative">
-        <input type="search" @input="searchChanged" v-model="search" v-bind:disabled="isLoading == true" v-bind:title="title" v-bind:placeholder="title" 
+        <input type="search" @input="searchChanged" v-model="search" v-bind:readonly="isLoading == true" v-bind:title="title" v-bind:placeholder="title" 
         class="pure-u-23-24" v-on:keydown.down="onArrowDown" v-on:keydown.up="onArrowUp" v-on:keydown.enter="onEnter">
         <!-- <ul class="autocomplete-results" v-show="results.length > 0"> -->
         <ul class="autocomplete-results pure-u-23-24" v-show="isOpen"> 

resources/views/settings/dashboard.blade.php

@@ -89,7 +89,7 @@
     <h3 class="header-title">Reports</h3>
 </div>	
 <div class="pure-g box-content">   
-    <div class="pure-u-1 pure-u-md-2-3">         
+    <div class="pure-u-1 pure-u-md-1">         
         {{-- <canvas id="myChart" width="400" height="260"></canvas>  --}}
         <div class="php-info">
             @php

resources/views/settings/layouts/app.blade.php

@@ -186,6 +186,15 @@
 <script type="text/javascript" src="{{ asset('js/lib.js') }}"></script>
 <script type="text/javascript">
     $('div.alert').not('alert-important');//.delay(3000).slideUp(300);
+
+    // A $( document ).ready() block.
+    $(document).ready(function() {
+        $(document).on("keydown", function (e) {
+            if (e.which === 8 && !$(e.target).is("input:not([type=radio]):not([type=checkbox]), textarea, [contentEditable], [contentEditable=true]")) {
+                e.preventDefault();
+            }
+	    });
+    });
 </script>
 <script type="text/javascript" src="{{ asset('backend/functions.js') }}"></script>
 @yield('after-scripts')