提问人：Hilmi Hidayat 提问时间：3/22/2021 更新时间：3/22/2021 访问量：500
使用 jquery 创建搜索功能
Create a search feature with jquery
问：
来自印度尼西亚的早上好。我想问一下如何在 laravel 中使用 jquery 创建搜索功能。
上图是在搜索表单中输入文本之前的初始显示，其中有一个卡片标题，即标签数据。然后，我希望当用户在搜索表单中输入文本时，数据显示更改为如下所示（显示的数据没有卡头或数据标签）。但是，如果搜索表单为空，则数据显示将再次如上图所示。
我想问的是，为什么当我尝试输入更具体的数据（例如“模块 III”）时，即使有标题为“模块 III”的数据，也不会显示数据。
以下是在模式中显示搜索表单和数据模块的代码。
<div class="modal-body">
<form>
<div>
<label for="title" class="type-paragraph1">
All available digital module type created by your company author and AJAR Hospitality
</label>
<div class="form-group mb-1 pr-3">
<input type="text" id="searchInput" class="form-control" placeholder="Type to search modules">
</div>
</div>
<div class="form-group self_paced_module" id="module_library_list">
<div class="digital-module-head">
</div>
<div id="dataDigitalList"></div>
<div id="moduleList"></div>
<input type="hidden" id="digital_title" name="digital_title[]">
<input type="hidden" id="digital_no" name="digital_no[]">
<div class="digital-module" id="digital_container"></div>
</div>
</form>
</div>
这是在搜索表单中输入文本之前和之后显示数据的代码
var module_digital = "";
var moduledigital = "";
var id_digital = $('.id_digital').map(function (i, n) { return parseInt($(n).val()); }).get();
// Get Unique Tags(cuma 1 biar ga kedouble2 tagnya)
var tags = (data.file_assignment).map(function(value,index) {
return value['tag'];
}).filter((value, index, self) => {
return self.indexOf(value) === index;
});
var modules = (data.file_assignment).filter((value, index, self) => {
return self.indexOf(value) === index;
});
$.each(tags, function(i,t){
module_digital += '<div class="card mb-1">';
module_digital += ' <div class="card-header collapsed" role="tab" id="accord_'+i+'">';
module_digital += ' <h5 class="mb-0">';
module_digital += ' <a class="font-demi type-paragraph2 accordion-list collapsed" data-toggle="collapse" data-parent="#accordionexample" href="#digital_x'+i+'" aria-expanded="false" aria-controls="digital_x'+i+'">'+t+'</a>';
module_digital += ' </h5>';
module_digital += ' </div>';
module_digital += ' <div id="digital_x'+i+'" class="collapse" role="tabpanel" aria-labelledby="accord_'+i+'">';
module_digital += ' <div class="card-body">';
$.each(data.file_assignment, function (index, fa) {
if($.inArray(fa.id, id_digital) < 0 && fa.tag == t) {
module_digital += '<div class="digital-module-head dataDigitalMode">';
module_digital += ' <div class="type-paragraph1">';
module_digital += ' <div>';
module_digital += ' <input data-title="'+fa.name+'" data-duration="'+fa.duration+'" data-type="'+fa.filetype+'" value="'+fa.id+'" type="checkbox" class="dmode" id="checkbox-fa'+index+'">';
module_digital += ' <label for="checkbox-fa'+index+'" id="title_digital" class="title_digital_filter">'+fa.name +'<br><span class="text-muted">'+ ((fa.code === null) ? '-' : fa.code) +'</span></label>';
module_digital += ' </div>';
module_digital += ' </div>';
// module_digital += ' <div class="type-paragraph1">01</div>';
module_digital += ' <div class="type-paragraph1">';
switch(fa.filetype) {
case 'pdf':
module_digital += '<div class="ajar-icon ajar-pdf ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'docx':
module_digital += '<div class="ajar-icon ajar-doc ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'doc':
module_digital += '<div class="ajar-icon ajar-doc ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'pptx':
module_digital += '<div class="ajar-icon ajar-ppt ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'ppt':
module_digital += '<div class="ajar-icon ajar-ppt ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'xlsx':
module_digital += '<div class="ajar-icon ajar-excel ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'xls':
module_digital += '<div class="ajar-icon ajar-excel ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'mp3':
module_digital += '<div class="ajar-icon ajar-mp3 ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'mp4':
module_digital += '<div class="ajar-icon ajar-mp4 ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'm3u8':
module_digital += '<div class="ajar-icon ajar-mp4 ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'youtube':
module_digital += '<div class="ajar-icon ajar-mp4 ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
}
module_digital += ' </div>';
module_digital += '</div>';
}
});
module_digital += ' </div>';
module_digital += ' </div>';
module_digital += '</div>';
});
if (module_digital == "") {
module_digital += '<div class="digital-module-head text-center" id="no_module_found">';
} else {
module_digital += '<div class="digital-module-head text-center" id="no_module_found" style="display:none;">';
}
module_digital += ' <div>No Module Library Found</div>';
module_digital += '</div>';
$('#dataDigitalList').html(module_digital);
$.each(modules, function(index,fa){
moduledigital += '<div class="card mb-1">';
moduledigital += '<div class="card-body">';
moduledigital += '<div class="digital-module-head moduleData">';
moduledigital += ' <div class="type-paragraph1">';
moduledigital += ' <div>';
moduledigital += ' <input data-title="'+fa.name+'" data-duration="'+fa.duration+'" data-type="'+fa.filetype+'" value="'+fa.id+'" type="checkbox" class="dmode" id="checkbox-fa'+index+'">';
moduledigital += ' <label for="checkbox-fa'+index+'" id="title_digital" class="module_filter">'+fa.name +'<br><span class="text-muted">'+ ((fa.tag === null) ? '-' : fa.tag) +'</span><br><span class="text-muted">'+ ((fa.code === null) ? '-' : fa.code) +'</span></label>';
moduledigital += ' </div>';
moduledigital += ' </div>';
// module_digital += ' <div class="type-paragraph1">01</div>';
moduledigital += ' <div class="type-paragraph1">';
switch(fa.filetype) {
case 'pdf':
moduledigital += '<div class="ajar-icon ajar-pdf ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'docx':
moduledigital += '<div class="ajar-icon ajar-doc ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'doc':
moduledigital += '<div class="ajar-icon ajar-doc ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'pptx':
moduledigital += '<div class="ajar-icon ajar-ppt ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'ppt':
moduledigital += '<div class="ajar-icon ajar-ppt ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'xlsx':
moduledigital += '<div class="ajar-icon ajar-excel ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'xls':
moduledigital += '<div class="ajar-icon ajar-excel ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'mp3':
moduledigital += '<div class="ajar-icon ajar-mp3 ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'mp4':
moduledigital += '<div class="ajar-icon ajar-mp4 ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'm3u8':
moduledigital += '<div class="ajar-icon ajar-mp4 ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
case 'youtube':
moduledigital += '<div class="ajar-icon ajar-mp4 ajar-icon-2x" title="'+fa.filetype.toUpperCase()+'"></div>';
break;
}
moduledigital += ' </div>';
moduledigital += '</div>';
moduledigital += ' </div>';
moduledigital += '</div>';
});
if (moduledigital == "") {
moduledigital += '<div class="digital-module-head text-center" id="no_module_found">';
} else {
moduledigital += '<div class="digital-module-head text-center" id="no_module_found" style="display:none;">';
}
moduledigital += ' <div>No Module Library Found</div>';
moduledigital += '</div>';
$('#moduleList').html(moduledigital).hide();
那么以下是我之前创建的用于搜索的数据
$('#searchInput').on('keyup', function (element) {
$('#dataDigitalList').show();
var inputs = $('#searchInput').val().toLowerCase();
var container = $('#moduleList');
var count = 0;
container.find('.module_filter').each(function () {
if ($(this).text().toLowerCase().search(inputs) > -1) {
$('#dataDigitalList').hide();
$('#moduleList').show();
$(this).parents('.card').show();
count++;
}
else {
$('#moduleList').hide();
$(this).parents('.card').hide();
}
});
if (!count) {
$('#no_module_found').show();
}
else {
$('#no_module_found').hide();
}
});
有人可以帮忙吗？如何使我创建的搜索功能运行良好？以及如何使搜索数据中的复选框可点击？
答： 暂无答案
评论