时间戳

首页 > 解决方案 > 包含@extends（'layouts.app'）时，laravel8输入预输入自动完成功能将不起作用

laravel - 包含@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 文件中的“延迟”时，它才有效。

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

标签： laravelautocompletetypeahead

解决方案

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

推荐阅读