We Keep Coding

Filter DataTable Plugin JS

I need to know how to make my search filter that is with the JS Datatable plugin do a search with the exact value, now when placing the value 1 for example, it returns the numbers 1, 21, 113, 41 etc. It is a simple code only I can not find how to do that ...
I hope you can help
$('#txtFolioFilter').on( 'keyup change clear', function () {
table
.columns(13)
**.search = ( this.value )**
.draw();
} );

You can do this with a custom search function. The following example assumes you are using the standard DataTables global search field - which can be selected using the following jQuery selector:
$('.dataTables_filter input')
Here is the function:
$(document).ready(function() {
var table = $('#example').DataTable( {
// your table initialization here
} );
$.fn.dataTable.ext.search.push(
function( settings, searchData, index, rowData, counter ) {
var searchTerm = $('.dataTables_filter input').val();
if (searchTerm.trim() === "") {
return true;
}
var exactMatch = false;
searchData.forEach(function (cellText) {
if (searchTerm === cellText) {
exactMatch = true;
}
});
return exactMatch;
}
);
} );
The following line captures all search events from the main search box:
$.fn.dataTable.ext.search.push(...)
A blank search term will return all records.
Otherwise, for each row, we check each field in the row, and return that row as matched if any of the fields exactly match the search term.
If you want to apply this "exact match" to only one column, then you can adjust the custom filter:
$.fn.dataTable.ext.search.push(
function( settings, searchData, index, rowData, counter ) {
var searchTerm = $('.dataTables_filter input').val();
if (searchTerm.trim() === "") {
return true;
}
var match = false;
searchData.forEach(function (cellText, index) {
if (index === 3) {
if (searchTerm === cellText) {
match = true;
}
} else {
// all other columns:
if (cellText.includes(searchTerm)) {
match = true;
}
}
});
return match;
}
);
With this approach, what rows are displayed will depend on what your data looks like across the entire row, of course.
Documentation for the search plug-in is here, for more background.

Autocompletion randomly activate when i press a checkbox in javascript

I'm making a to-do list in javascript, but after i insert a element, when i try to press the checkbox i generate with the task, i got a random dropdown (from the input who was hidden (removeChild))
I try to recode some part but keep getting this problem :
- display: none
- hidden(true)
It can happen on Firefox but not on Chrome
function createInput(type, value = "", name = "", placeholder = "", require = false)
{
const input = document.createElement("input")
input.setAttribute("type", type)
input.setAttribute("style", "margin-right:10px")
if (value !== "") {
input.setAttribute("value", value)
}
if (name !== "") {
input.setAttribute("id", name)
input.setAttribute("name", name)
}
if (placeholder !== "") {
input.setAttribute("placeholder", placeholder)
}
if (require) {
input.setAttribute("required", "true")
}
return input
}
const addTaskElt = document.getElementById("add_task")
const formElt = document.getElementById("list_task")
const inputElt = createInput("text", "", "task", "Entrez votre tâche")
const submitElt = createInput("submit", "Ajouter")
const buttonElt = document.createElement("button")
buttonElt.textContent = "Ajouter une tâche"
addTaskElt.appendChild(buttonElt)
buttonElt.addEventListener("click", function(e) {
addTaskElt.removeChild(buttonElt)
addTaskElt.appendChild(inputElt)
addTaskElt.appendChild(submitElt)
inputElt.focus()
formElt.addEventListener("submit", function(e) {
e.preventDefault()
const itemElt = document.createElement("span")
const checkElt = createInput("checkbox")
const taskElt = document.createElement("span")
if (e.target.task.value !== "") {
taskElt.textContent = e.target.task.value
itemElt.classList.add("item")
itemElt.appendChild(checkElt)
itemElt.appendChild(taskElt)
formElt.appendChild(itemElt)
// Switch form and button
inputElt.value = "" // clear input
addTaskElt.removeChild(inputElt)
addTaskElt.removeChild(submitElt)
addTaskElt.appendChild(buttonElt)
}
// We can edit the task by clicking it
taskElt.addEventListener("click", function() {
const result = prompt("Modifier la tâche")
if (result === null) {
}
else if (result === "") {
formElt.removeChild(itemElt)
}
else {
taskElt.textContent = result
}
})
checkElt.addEventListener("change", function(e) {
if (e.target.checked) { // if check, task done
taskElt.setAttribute("style", "color:gray;text-decoration:line-through")
}
else {
taskElt.setAttribute("style", "color:black")
}
})
})
})

From your comment above, Im assuming .setAttribute(“autocomplete”, “off”) worked to solve your problem.
It would appear autocomplete is on by default on input fields, but I did not see a default case on mdn, https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. It does, however, state "The source of the suggested values is generally up to the browser". So if the browser thinks the items in the list are important to that input field then go ahead and show the related list.

2 articles with same "data-type"

So i have a select menu with various options and images below that change accordingly to what we choose in the options.
I managed to get help from stackoverflow using this code.
$(".filter").change(function() {
var filterValue = $(this).val();
var row = $('.categorias');
row.hide()
row.each(function(i, el) {
if($(el).attr('data-type') == filterValue) {
$(el).show();
}
})
// In Addition to Wlin's Answer (For "All" value)
if ("all" == filterValue) {
row.show();
}
});
This works just fine this way. With only one "data-type".
<article class="portfolio-item categorias" data-type="desporto">
But the problem is that some articles have 2, 3 or even 4 types and if i add another data type he only assumes the first one. How can i make one article have the data-types i want?

row.each(function(i, el) {
if($(el).attr('data-type').split(' ').indexOf(filterValue) !== -1) {
$(el).show();
}
})
or
row.each(function(i, el) {
if($(el).data('type').split(' ').indexOf(filterValue) !== -1) {
$(el).show();
}
})

I'm not sure what data structure you're using but, as far as I can imagine, you could put data-type as a list of types separated by commas (for example: data-type="type1,type2,type3") and your JavaScript code, taking advantage to make some better, could look like this:
$(".filter").change(function() {
var filterValue = $(this).val();
var row = $('.categorias');
if ("all" == filterValue) {
row.show();
} else {
row.each(function(i, el) {
if ($(el).attr('data-type').contains(filterValue)) {
$(el).show();
} else {
row.hide();
}
});
}
});

Jquery validation not working properly?

I am trying to do required validation in a asp.net page.
I have multiple controls that will be hidden and displayed.
Controls like checkboxlist,dropdownlist,multiselectedlistbox.
I am using a css class called required attaching to all these controls to check the validation.
I am trying to check if each control has value or not but my code is checking each options with in each controls.
I am really not finding a way not a jquery expert just a novice...
Here is my code any ideas anyone please....
$("input[type='submit']").click(function () {
if ($(this).val() != 'Back') {
var names = [];
var info=" ";
$('.required input').each(function () {
var control = $(this);
if (control.is(':enabled')) {
names[$(this).attr('name')] = true;
}
});
$('.required option').each(function () {
var control = $(this);
if (control.is(':enabled')) {
names[$(this).attr('name')] = true;
}
});
for (name in names) {
var radio_buttons = $("input[name='" + name + "']");
if ((radio_buttons.filter(':checked').length == 0) ||(radio_buttons.filter(':selected').length == 0)) {
info += radio_buttons.closest("table").find('label').html()+"</br>";
}
}
if (info != " ") {
$("#validation_dialog p").html(info);
$("#validation_dialog").dialog({
title: "Validation Error!",
modal: true,
resizable: false,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
}
}
});
here is a fiddle for it...
http://jsfiddle.net/bDmgk/35/

I think what you want is:
$(".required input[type='radio']:checked").each(function(){
});
instead of :
$(".required option").each(function(){ ... });

Hi I made some changes to your fiddle basically I checked for the inputs inside each column like this and then I added them to your names array.
Using
$('table.required:eq(0) input:checked')
I you can got all the inputs that are checked on the first column if the lenght of the array returned is 0 then no input is checked, i't the same procedure for the other ones.
An yes those input names are weird.
Check this fiddle
JSFiddle

clear form fields onblur on all fields

Hey so I am working on a calculator with a form and javascript. I want that when the user clicks in a field and the value is "0" the field gets cleared. When he clicks outside the field while the value is "" I want the field to be filled again with 0. I can easily do so for specific fields like that:
document.forms[0].elements[0].onfocus = function() {
if(this.value == "0") {
this.value = "";
}
};
document.forms[0].elements[0].onblur = function() {
if(this.value == "") {
this.value = "0";
}
};
But I want it to work with every field and I don't want to write this bunch of code for every field and I do not want to use inline references in my html. Which option do I have? Thanks in advance.

Try this.
You can also replace the 'document.forms[0].elements' by 'document.querySelectorAll("form input")', etc.
Array.prototype.slice.call(document.forms[0].elements).forEach(function(element){
element.onfocus = function() {
if(this.value == "0") {
this.value = "";
}
};
element.onblur = function() {
if(this.value == "") {
this.value = "0";
}
};
})