导航栏中与搜索表单相关的Javascript未在源代码中显示

Question

我将搜索表单添加到我的部分导航中，如下所示：

{!! Form::open(array('id' => 'main_search_form', 'url' => 'main_txt_search', 'class' => 'form-inline pull-xs-right', 'method' => 'get')) !!}
        {!! Form::text('main_search',$value = null, array('placeholder' => 'Search', 'id' => 'main_search_input', 'class' => "form-control")) !!}
        {!! Form::submit('Search', array('class' => 'btn btn-info-outline' )) !!}
        {!! Form::close() !!}

在栏中显示如下：

我想做的是将它与一些javascript结合使用，以使用jquery自动完成功能并在页面中发布搜索结果而不更新它。 关键是要在哪里放置指向表单脚本的链接？ 我试图将其直接放在部分中，但它们没有被加载。 我的应用程序html是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Project</title>

    <!-- CSS contains bootstrap -->
    <link rel="stylesheet" href="/css/app.css">
    <!-- bootstrap mobile first -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    @yield('scripts')


</head>
<body>


<div class="container">

    @include('partials.nav')

    @yield('content')


</div>


</body>
</html>

所以我在这里想的是，因为该页面在包含导航之前先加载了脚本，所以它无法加载该脚本...但是由于导航出现在所有页面中..您到底将此链接放在哪里？

Answer 1

该页面在包含导航之前先加载脚本，否则无法加载脚本

一件事是要加载脚本，即从其src获取并加载到文档中，另一件事是它引用本身尚未解析的html元素。

对于后者，您必须确保脚本位于受影响的html之后。 要么在末尾加载它们（将@yield('scripts')移到底部（在</body>之前），要么用

$(document).ready(function() {
  //
});

为了仅在文档加载后执行它。