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

【问题标题】：Javascript related to search form in navbar doesn't show up in source code与导航栏中的搜索表单相关的 Javascript 未显示在源代码中
【发布时间】：2025-12-10 08:40:01
【问题描述】：

我在部分导航中添加了一个搜索表单，如下所示：

{!! 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>

所以我在这里的想法是，由于页面在包含导航之前加载脚本，因此无法加载脚本...但是由于导航出现在所有页面中..您将此链接放在脚本的什么地方？

【问题讨论】：

只要它在模板中的某个部分内，您就应该可以将它放在视图中的任何位置。如果您在模板中向我们展示了您尝试添加脚本的部分，并验证了它实际上在@section ... @endsection 标签内的位置，并且该部分作为@yield 语句存在于您的主布局中，也许会有所帮助。
我在 partials 中创建了一个 nav_scripts.blade.php 并将 @include('partials.nav_scripts') 放在 app html 中的 head 中。

标签： jquery twitter-bootstrap laravel navbar blade

【解决方案1】：

页面在包含导航之前加载脚本，但加载脚本失败

一件事是让脚本加载，也就是说，从它的src 中获取并加载到文档中，另一件事是它引用了一个本身还没有被解析的html元素.

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

包装你的脚本

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

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

【讨论】：