Good morning from Indonesia. I want to ask about how to create a search feature with jquery in laravel. 
The image above is the initial display before entering text in the search form, in which there is a card header which is the Tag data. Then, I want when the user enters text in the search form, the data display changes to something like the one below (the data displayed is no card header or data tag). But if the search form is empty, the data display will be like the image above again.
What I want to ask is why when I try to enter more specific data such as "Module III" the data is not displayed, even though there is data that has the title "Module III".
The following is the code to display the search form and the data module in the modal.
<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> and this is code to display data before and after entering text in search form
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(); then the following is the data that I have previously created for searching
$('#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(); } }); Anyone can help ? How do I make the search feature that I created works well? and how do I make the checkbox in the search data clickable ?
https://stackoverflow.com/questions/66740209/create-a-search-feature-with-jquery March 22, 2021 at 12:05PM
没有评论:
发表评论