包含 @extends('layouts.app') 时，laravel8 输入提前自动完成将不起作用

如何解决包含 @extends('layouts.app') 时，laravel8 输入提前自动完成将不起作用

我一直在寻找获得这项工作的方法，但没有运气。我想使用预先输入自动完成功能。

我的 app.blade 上的主要脚本

 <!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>


 <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
{{--    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>--}}

然后我在我的搜索刀片上有这个脚本

@extends('layouts.app')

@section('content')

    <input class="typeahead form-control"   name="query" type="search" placeholder="search" autocomplete="off"> </input>


<script type="text/javascript">
    var path = "{{ route('autocomplete') }}";
    $('input.typeahead').typeahead({
        source:  function (query,process) {
            return $.get(path,{ query: query },function (data) {
                return process(data);
            });
        }
    });
</script>

@endsection

然后是我的搜索控制器

public function autocomplete(Request $request)
{

    $search_text = $request->input('query');

    $data = Skills::select("name")
        ->where("name","LIKE","%{$search_text}%")
        ->get();

    return response()->json($data);
}

所有这些都是根据教程完成的，只有当我删除 @extends('layouts.app') 行或删除 app.blade 文件中的“延迟”时，它才起作用。

但是当我这样做时，我所有的样式布局都变得一团糟。有没有不删除现有代码的解决方案。因为所有现有代码都很重要。

解决方法

在脚本中试试这个 $('input.typeahead:search').typeahead({