Cannot get bootstrap typeahead to work with Laravel blade template -> `TypeError: $(...).typeahead is not a function`
Cannot get bootstrap typeahead to work with Laravel blade template -> `TypeError: $(...).typeahead is not a function`
我有一个表单视图，"addMachine.blade.php"，它目前是一个通过导航栏访问的弹出模式表单。我还在表单中设置了 Typeahead 自动完成功能。
这些是 addMachine 视图和 autocompleteUser 的路由
Route::get('/machine/add', 'Machine\AddMachineController@index')->name('addMachine');
Route::get('/machine/add/operator_autocomplete', [
'as'=>'autocompleteUser',
'uses'=>'Machine\AddMachineController@autocompleteUser']);
当我通过 http://localhost/machine/add 访问我的网站时，Typeahead 自动完成工作。
但是，当我尝试通过导航栏访问表单并将其作为弹出模式打开（这是我想要它做的）时，我从 Chrome 收到以下错误的控制台：TypeError: $(...).typeahead is not a function。我已经尝试将 typeahead 和 jquery 链接移动到我的 app.blade.php，但我仍然遇到同样的错误。
这是我的表单视图的代码，"addMachine.blade.php"。
-- 删除的代码，请参阅下面的编辑以获取新的 addMachine.blade.php 代码 --
这是我的 AddMachineController 中处理自动完成的函数
/**
* Handle a autocomplete user request.
*
* @return \Illuminate\Http\Response
*/
public function autocompleteUser(Request $request)
{
$data = User::where("name", "LIKE", "%{$request->input('query')}%")
->orWhere("id", "LIKE", "%{$request->input('query')}%")
->orderBy('name')
->take(5)
->get();
return response()->json($data);
}
这是我的app.blade.php
-- 删除代码，请参阅下面的编辑以获取新的 app.blade.php 代码 --
最后，这是我的 navigationBar.blade.php
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/home">SEI</a>
</div>
@if (!Auth::guest())
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<-- Some more links -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Machine <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@if (Auth::user()->isMQE())
<li><a href="{{ route('addMachine') }}" data-toggle="modal" data-target="#addMachinePopupModal">Add New Machine</a></li>
@endif
</ul>
</li>
<-- Some more links -->
</ul>
</div>
<div id="addMachinePopupModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
@endif
</div>
</nav>
感谢任何帮助。另外，我不确定这是否是让导航栏显示弹出模式表单的最佳方式。如果有人对我正在做的任何事情有更好的解决方案，请随时分享。我是网络开发的新手，喜欢学习:)
注意：使用 Laravel 5.4 和 Php7
编辑：
当我在 Chrome 中使用 "Inspect" 工具时，我可以看到我的 addMachine 视图代码。但是，当我使用 "View Page Source" 时，它不存在。
我现在猜测这就是预输入错误背后的原因，我没有以巧妙的方式从我的导航栏中显示弹出模式表单。有什么建议吗？
编辑2：
似乎弹出模式确实是问题所在。
我将 app.blade.php 更改为以下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'SEI-MQE') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
@include('include.navigationBar')
@include('include.flashMessage')
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
@yield('scripts')
</body>
</html>
然后我把我的addMachine.blade.php改成了这个
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading text-center">Add New Machine</div>
<div class="panel-body">
<form class="form-horizontal" method="POST" action="{{ route('addMachine') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('part_id') ? ' has-error' : '' }}">
<label for="part_id" class="col-md-4 control-label">Part Id#</label>
<div class="col-md-6">
<input class="typeahead form-control" autocomplete="off" type="text" id="part_id" name="part_id" value="{{ old('part_id') }}">
@if ($errors->has('part_id'))
<span class="help-block">
<strong>{{ $errors->first('part_id') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group">
<label for="department_id" class="col-md-4 control-label">Department</label>
<div class="col-md-6">
<p style="margin-top: 7px;">
<select name="department_id" id="department_id" type="department_id">
<?php
foreach ($departments as $department) {
echo "<option value=".$department['id'].">".$department['name']."</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="type_id" class="col-md-4 control-label">Machine Type</label>
<div class="col-md-6">
<p style="margin-top: 7px;">
<select name="type_id" id="type_id" type="type_id">
<?php
foreach ($types as $type) {
echo "<option value=".$type['id'].">".$type['name']."</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="production_status_id" class="col-md-4 control-label">Production Status</label>
<div class="col-md-6">
<p style="margin-top: 7px;">
<select name="production_status_id" id="production_status_id" type="production_status_id">
<?php
foreach ($productionStatuses as $productionStatus) {
echo "<option value=".$productionStatus['id'].">".$productionStatus['name']."</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Add Machine
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript">
var autocompletePartPath = "{{ route('autocompletePart') }}";
$('#part_id').typeahead( {
source: function (query, process) {
return $.get(autocompletePartPath, { query: query }, function (data) {
return process(data);
});
},
displayText: function (item) {
return `${item.id} - ${item.name} ${item.revision}`;
},
afterSelect: function (item) {
$('#part_id').val(item.id);
},
fitToElement: true
});
</script>
@endsection
我更改了我的导航栏 html 以正常打开 addMachine 视图，而不是通过弹出模式打开，现在可以提前输入了。
任何人都可以向我解释如何使我的 addMachine 视图成为一个从导航栏打开并具有预输入功能的弹出模式表单吗？
错误提示缺少输入功能。它说在您调用该函数之前它不包含在内。在调用该函数之前应该包含该库，但正如我所见，您已将您的库包含在 blade.
中
当我尝试解决此类错误时，我使用 VIEW PAGE SOURCE 并尝试检查页面的元素、样式表和脚本的顺序。
然后从那里，您也许可以找出问题所在。也许图书馆没有加载或它在错误的地方。然后，在你的 blade.
中重新调查它
终于想通了。我的问题的解决方案只是将 jquery 和预输入源脚本从 addMachine.blade.php 移动到 app.blade.php，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'SEI-MQE') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
@include('include.navigationBar')
@include('include.flashMessage')
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
</body>
</html>
解决方案很简单，所以我觉得很愚蠢，但是对于任何想要一个示例的人来说，让导航栏打开一个带有预输入自动完成的弹出模式表单，请阅读我在问题中的解决方案。
我有一个表单视图，"addMachine.blade.php"，它目前是一个通过导航栏访问的弹出模式表单。我还在表单中设置了 Typeahead 自动完成功能。
这些是 addMachine 视图和 autocompleteUser 的路由
Route::get('/machine/add', 'Machine\AddMachineController@index')->name('addMachine');
Route::get('/machine/add/operator_autocomplete', [
'as'=>'autocompleteUser',
'uses'=>'Machine\AddMachineController@autocompleteUser']);
当我通过 http://localhost/machine/add 访问我的网站时，Typeahead 自动完成工作。
但是，当我尝试通过导航栏访问表单并将其作为弹出模式打开（这是我想要它做的）时，我从 Chrome 收到以下错误的控制台：TypeError: $(...).typeahead is not a function。我已经尝试将 typeahead 和 jquery 链接移动到我的 app.blade.php，但我仍然遇到同样的错误。
这是我的表单视图的代码，"addMachine.blade.php"。
-- 删除的代码，请参阅下面的编辑以获取新的 addMachine.blade.php 代码 --
这是我的 AddMachineController 中处理自动完成的函数
/**
* Handle a autocomplete user request.
*
* @return \Illuminate\Http\Response
*/
public function autocompleteUser(Request $request)
{
$data = User::where("name", "LIKE", "%{$request->input('query')}%")
->orWhere("id", "LIKE", "%{$request->input('query')}%")
->orderBy('name')
->take(5)
->get();
return response()->json($data);
}
这是我的app.blade.php
-- 删除代码，请参阅下面的编辑以获取新的 app.blade.php 代码 --
最后，这是我的 navigationBar.blade.php
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/home">SEI</a>
</div>
@if (!Auth::guest())
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<-- Some more links -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Machine <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@if (Auth::user()->isMQE())
<li><a href="{{ route('addMachine') }}" data-toggle="modal" data-target="#addMachinePopupModal">Add New Machine</a></li>
@endif
</ul>
</li>
<-- Some more links -->
</ul>
</div>
<div id="addMachinePopupModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
@endif
</div>
</nav>
感谢任何帮助。另外，我不确定这是否是让导航栏显示弹出模式表单的最佳方式。如果有人对我正在做的任何事情有更好的解决方案，请随时分享。我是网络开发的新手，喜欢学习:)
注意：使用 Laravel 5.4 和 Php7
编辑： 当我在 Chrome 中使用 "Inspect" 工具时，我可以看到我的 addMachine 视图代码。但是，当我使用 "View Page Source" 时，它不存在。
我现在猜测这就是预输入错误背后的原因，我没有以巧妙的方式从我的导航栏中显示弹出模式表单。有什么建议吗？
编辑2： 似乎弹出模式确实是问题所在。 我将 app.blade.php 更改为以下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'SEI-MQE') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
@include('include.navigationBar')
@include('include.flashMessage')
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
@yield('scripts')
</body>
</html>
然后我把我的addMachine.blade.php改成了这个
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading text-center">Add New Machine</div>
<div class="panel-body">
<form class="form-horizontal" method="POST" action="{{ route('addMachine') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors->first('name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('part_id') ? ' has-error' : '' }}">
<label for="part_id" class="col-md-4 control-label">Part Id#</label>
<div class="col-md-6">
<input class="typeahead form-control" autocomplete="off" type="text" id="part_id" name="part_id" value="{{ old('part_id') }}">
@if ($errors->has('part_id'))
<span class="help-block">
<strong>{{ $errors->first('part_id') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group">
<label for="department_id" class="col-md-4 control-label">Department</label>
<div class="col-md-6">
<p style="margin-top: 7px;">
<select name="department_id" id="department_id" type="department_id">
<?php
foreach ($departments as $department) {
echo "<option value=".$department['id'].">".$department['name']."</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="type_id" class="col-md-4 control-label">Machine Type</label>
<div class="col-md-6">
<p style="margin-top: 7px;">
<select name="type_id" id="type_id" type="type_id">
<?php
foreach ($types as $type) {
echo "<option value=".$type['id'].">".$type['name']."</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="production_status_id" class="col-md-4 control-label">Production Status</label>
<div class="col-md-6">
<p style="margin-top: 7px;">
<select name="production_status_id" id="production_status_id" type="production_status_id">
<?php
foreach ($productionStatuses as $productionStatus) {
echo "<option value=".$productionStatus['id'].">".$productionStatus['name']."</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Add Machine
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript">
var autocompletePartPath = "{{ route('autocompletePart') }}";
$('#part_id').typeahead( {
source: function (query, process) {
return $.get(autocompletePartPath, { query: query }, function (data) {
return process(data);
});
},
displayText: function (item) {
return `${item.id} - ${item.name} ${item.revision}`;
},
afterSelect: function (item) {
$('#part_id').val(item.id);
},
fitToElement: true
});
</script>
@endsection
我更改了我的导航栏 html 以正常打开 addMachine 视图，而不是通过弹出模式打开，现在可以提前输入了。
任何人都可以向我解释如何使我的 addMachine 视图成为一个从导航栏打开并具有预输入功能的弹出模式表单吗？
错误提示缺少输入功能。它说在您调用该函数之前它不包含在内。在调用该函数之前应该包含该库，但正如我所见，您已将您的库包含在 blade.
中当我尝试解决此类错误时，我使用 VIEW PAGE SOURCE 并尝试检查页面的元素、样式表和脚本的顺序。
然后从那里，您也许可以找出问题所在。也许图书馆没有加载或它在错误的地方。然后，在你的 blade.
中重新调查它终于想通了。我的问题的解决方案只是将 jquery 和预输入源脚本从 addMachine.blade.php 移动到 app.blade.php，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'SEI-MQE') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
@include('include.navigationBar')
@include('include.flashMessage')
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
</body>
</html>
解决方案很简单，所以我觉得很愚蠢，但是对于任何想要一个示例的人来说，让导航栏打开一个带有预输入自动完成的弹出模式表单，请阅读我在问题中的解决方案。