我正在尝试将jquery插件用于数据表，但实时搜索没有出现，因为存在一些错误。错误消息是
Uncaught TypeError: Cannot read property 'searchText' of undefined
at m.fn.init.$.fn.tableSearch (html-table-search.js:12)
at HTMLDocument.<anonymous> (select2.js:27)
at j (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.J (jquery.min.js:2)
$.fn.tableSearch @ html-table-search.js:12
(anonymous) @ select2.js:27
j @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
J @ jquery.min.js:2"
有没有人也会遇到这个？我怎样才能解决这个问题？我在laravel中做这件事
我的主要布局
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SRI Plugins | </title>
<!-- jQuery -->
<script src=" {{{ asset('/js/jquery.min.js') }}}"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<!-- Bootstrap -->
<link href="{{ asset('/css/bootstrap.min.css') }}" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- iCheck -->
<link href="{{ asset('/css/green.css') }}" rel="stylesheet">
<!-- bootstrap-progressbar -->
<link href="{{ asset('/css/bootstrap-progressbar-3.3.4.min.css') }}" rel="stylesheet">
<!-- jVectorMap -->
<link href="{{ asset('/css/jquery-jvectormap-2.0.3.css') }}}" rel="stylesheet"/>
<!-- Custom Theme Style -->
<link href="{{ asset('/css/custom.min.css') }}" rel="stylesheet">
<!-- Jquery Ajax -->
@yield('jquery_ajax_custom')
<!-- Sweetalert for validation of jquery / ajax fileupload -->
@yield('sweetalert2')
@include('live_search_laravel.partials.header')
</head>
查看我的实时搜索
@extends('layout.default')
@section('content')
<br><br>
<br><br>
<div class="container">
<h4>Live Search using Laravel</h4>
<div class="col-md-6 col-lg-6 pull-right" >
<p class="pull-right">Click on the zip logo to download the file:<p>
<a href="/live_search_laravel.zip" download="live-search(laravel).zip">
<br><br>
<img border="0" src="/images/ziplogo.png" class="pull-right" alt="AngularJS" width="50" height="42">
</a>
</div>
</div>
<br>
<div class="col-md-12 col-sm-6 col-xs-12">
<div class="x_panel">
<div class="x_content">
<table class="search-table table table-hover">
<tr>
<th>
Original File Name
</th>
<th>
Change File Name
</th>
<th>
File Extension
</th>
<th>
Image
</th>
<th>
Category
</th>
<th>
Statusx
</th>
</tr>
@foreach($data as $file)
<tr>
<td>{{ $file->original_filename}}</td>
<td>{{ $file->rs_filename}}</td>
<td>{{ $file->file_extension}}</td>
<td>{{ $file->file_extension}}</td>
<td>@if($file->category=="1"){{ "Laravel" }}@endif</td>
<td>
@if($file->status=="0")
<form action="/activateImage/{{ $file->id}}" method="post">
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
<button type="submit" class="btn btn-primary">Activate</button>
</form>
@else
<form action="{{ url('deactivateImage', ['id' => $file->id]) }}" method="post">
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
<button type="submit" class="btn btn-primary">Deactivate</button>
</form>
@endif
</td>
</tr>
@endforeach
</table>
</div>
</div>
</div>
<h4>All Activated Images using Foreach</h4>
@foreach($data as $file)
@if($file->status=="1")
<div class ="row">
<div class ="form-group">
<img src="/files/images/{{ $file->rs_filename }} " width ="50px" height ="50px">
</div>
</div>
@endif
@endforeach
<h4>All Images using the index</h4>
<div class ="row">
<div class ="form-group">
<img src="/files/images/{{ $data[0]['rs_filename']}} " width ="50px" height ="50px">
</div>
</div>
<div class="col-md-6 col-lg-4 pull-right">
<img src="/files/images/{{ $data[1]['rs_filename']}} " width ="50px" height ="50px">
</div>
@stop
@section('select2_js')
<script type="text/javascript" src="/js/live_search_laravel/select2.js"></script>
@stop
JS
/**
**options to have following keys:
**searchText: this should hold the value of search text
**searchPlaceHolder: this should hold the value of search input box placeholder
**/
(function($){
$.fn.tableSearch = function(options){
if(!$(this).is('table')){
return;
}
var tableObj = $(this),
searchText = (options.searchText)?options.searchText:'Search: ',
searchPlaceHolder = (options.searchPlaceHolder)?options.searchPlaceHolder:'',
divObj = $('<div style="float:right;">'+searchText+'</div><br /><br />'),
inputObj = $('<input type="text" placeholder="'+searchPlaceHolder+'" />'),
caseSensitive = (options.caseSensitive===true)?true:false,
searchFieldVal = '',
pattern = '';
inputObj.off('keyup').on('keyup', function(){
searchFieldVal = $(this).val();
pattern = (caseSensitive)?RegExp(searchFieldVal):RegExp(searchFieldVal, 'i');
tableObj.find('tbody tr').hide().each(function(){
var currentRow = $(this);
currentRow.find('td').each(function(){
if(pattern.test($(this).html())){
currentRow.show();
return false;
}
});
});
});
tableObj.before(divObj.append(inputObj));
return tableObj;
}
}(jQuery));