Develop Reference

How to display default message when no results found on Jquery search filter

I'm currently building a page where a search field acts as a filter. It works perfectly fine and shows data against related word, but there is one issue that I'd like to solve. When the entered string or other words is not found in all the existing the page remains blank.
How could I display a default message on my page when no results are found by the filter? Something like a simple <p> explaining that no results were found.
The idea is to display it only once as long as the string is not found.
$('#search_field').on('keyup', function() {
var value = $(this).val();
var patt = new RegExp(value, "i");
$('#userFind').find('tr').each(function() {
var $table = $(this);
if (!($table.find('td').text().search(patt) >= 0)) {
$table.not('.t_head').hide();
}
if (($table.find('td').text().search(patt) >= 0)) {
$(this).show();
}
});
});

This is untested since you haven't provided any table to your question.
After you have looped though all tr, then check if any is visible. If not then append a tr with custom message and remove it and new search.
$('#search_field').on('keyup', function() {
var value = $(this).val();
// console.log(value);
var patt = new RegExp(value, "i");
$(".noRecord").remove();
$('#userFind').find('tr').each(function() {
var $table = $(this);
if (!($table.find('td').text().search(patt) >= 0)) {
$table.not('.t_head').hide();
} else {
$(this).show();
}
});
if ($('#userFind tr:visible').length == 0) {
$('#userFind tbody').append("<tr class='noRecord'><td>No records found.</td></tr>")
}
});

Assuming you have a div:
<div id="zeroHits">no results were found</div>
You can hide/show the #zeroHits div as follows:
$('#search_field').on('keyup', function() {
var value = $(this).val();
var patt = new RegExp(value, "i");
var zeroHits = true;
$('#userFind').find('tr').each(function() {
var $table = $(this);
if (!($table.find('td').text().search(patt) >= 0)) {
$table.not('.t_head').hide();
}
if (($table.find('td').text().search(patt) >= 0)) {
$(this).show();
zeroHits = false;
}
});
if(zeroHits) {
$('#zeroHits').show();
} else {
$('#zeroHits').hide();
}
});

Try this untested code
post your HTML and I can test
const $rows = $('#userFind tbody tr'); // only tbody rows
$('#search_field').on('keyup', function() {
var value = $(this).val();
// console.log(value);
var patt = new RegExp(value, "i");
$rows.each(function() {
const found = $(this).find('td').filter(function() {
return $(this).text().search(patt) != -1
}).length > 0
$(this).toggle(found);
});
$("#notFound").toggle($rows.filter(":visible").length === 0)
});

Why is selector.text getting an internal function value?

In a $.ajax success function I am trying to run a delay before making another call. My document has a <DIV ID="status"></DIV> element, so the first step here works fine:
$("#status").text = "Refreshing";
But when I try to add ellipses to that text via a setInterval function like this:
var count = 0;
var waitingID = setInterval(waiting, 1000);
function waiting() {
if(count == 5) {
clearInterval(waitingID);
CallUpdate();
}
else {
count++;
var notice = $("#status");
notice.text(notice.text + ".");
}
}
the text in that DIV becomes
function ( value ) { return access( this, function( value ) {
return value === undefined ?
jQuery.text( this ) :
this.empty().each(function() {
if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
this.textContent = value;
}
}); }, null, value, arguments.length ); }.
What is going on? Why isn't the notice.text(notice.text + "."); simply appending a . to the text in the DIV?

Nothing wrong with your function. You are just using jQuery's text() function incorrectly.
$('#status').text('Refreshing');
var count = 0;
var waitingID = setInterval(waiting, 1000);
function waiting() {
if(count == 5) {
clearInterval(waitingID);
console.log('CallUpdate()');
}
else {
count++;
var notice = $("#status");
notice.text(notice.text() + ".");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="status"></p>

jQuery's text() is a function, not a property, to be used as $("#status").text("Refreshing");
It does however accept a callback you can use for concatenating text, like this
var notice = $("#status");
notice.text(function(_,txt) {
return txt + "."
});
When you do notice.text(notice.text + "."); you're trying to add a period to a function reference

How to put a condition in jQuery's map function?

I am trying to put a condition in jQuery's map function. My issue is that I don't want the same number in the map function value. When it is the same I want to display an alert box. My map function code is like this:
var rankbox= $('input[type=text][class = cate_rank]').map(function() {
return this.value;
}).get();
If I get a value like 1,2,3,4,5 it's ok, but if I get a value like 1,2,3,2,5, I want to display an alert box. Is it possible?
How to put a condition in jQuery's map function?
function change_rank() {
var rankbox= $('input[type=text][class = cate_rank]').map(function() {
if() {
} else { }
return this.value;
}).get();

var vals = []
$('input[type=text][class = cate_rank]').each(function(){
if($(this).val() && (typeof vals[$(this).val()] == 'undefined')){
vals[$(this).val()] = 1;
var last_val = $(this).val();
}else if($(this).val() && (typeof last_val != 'undefined') && parseInt(last_val) > parseInt($(this).val())){
alert('Whooah! Something went terribly wrong! Inputs don\'t have values ordered incrementally!');
}else{
alert('Whooah! Something went wrong! We got two inputes with same value!');
}
});

Check this,
var rankbox= $(".test").map(function() {
return this.value;
}).get();
var sorted_arr = rankbox.slice().sort();
var results = [];
for (var i = 0; i < rankbox.length - 1; i++) {
if (sorted_arr[i + 1] == sorted_arr[i]) {
results.push(sorted_arr[i]);
}
}
var rankbox= $(".test").map(function() {
if($.inArray(this.value, results) > -1){
alert(this.value+" is duplicate");
}
return this.value;
}).get();
I took reference of this link

If you are Looking to check dup you can try this:
var x=[1,2,3,2,5]
var has=!x.every(function(v,i) {
return x.indexOf(v) == i;
});
console.log(has);//true means dup found else not found.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

you can try with a object. check this:
function change_rank() {
var temp = {};
var rankbox= $('input[type=text][class = cate_rank]').map(function() {
if(temp[this.value]==undefined) {
temp[this.value] = this.value;
} else {
alert('the same value');
}
return this.value;
}).get();

JS hasAttribute with data attribute value

Is there a native way, no jQuery, to check if a dom element has the attribute with the selected value. For example:
//assume doc has
data-mod="do" defined
This will be true:
document.hasAttribute('data-mod');
but this will be false:
document.hasAttribute('data-mod="do"')
Is there any way to natively check for a data attribute on a DOM element with the value?

You have to access the attribute's value via getAttribute and compare it to your expected string:
if (node.getAttribute('data-mod') === 'do') {
...
}
For modern browsers you can use matches:
if (node.matches('[data-mod="do"]')) {
...
}
… or for [data-*] attributes you can use dataset:
if (node.dataset.mod === 'do') {
...
}

You can do it properly with dataset,
if (elementNode.dataset['mod'] == 'do') {
//your code goes here.
}
By using dataset you can access the data-attributes of an element easily.

Yes, here it goes:
var selector = document.getElementsByTagName("H1")[0]; //Exemple of a h1
if (selector.getAttribute('data-mod') == "do"){
//Do your logic
}

This may work...
var list = document.querySelectorAll('[data-mod="do"]');

You could use Element.attributes
function data(el, dataName, dataValue) {
for (var i = 0; i < el.attributes.length; i++) {
if (/^(data)(?=-\w+|=[^=]*$|=$|$)/g.test(el.attributes[i].name)) {
if (dataName && el.attributes[i].name === "data-" + dataName) {
if (dataName && dataValue
&& el.attributes[i].name === "data-" + dataName
&& el.attributes[i].value === dataValue) {
return true
}
return true
} else {
return true
}
}
}
return false
}
var elems = document.querySelectorAll("div");
for (var i = 0; i < elems.length; i++) {
console.log(data(elems[i]))
}
var _name = "prop", _value = "123";
console.log("element #"
+ elems[1].id
+" has `data-*` attribute name:"
+_name
+", value:"+_value
, data(elems[1], _name, _value))
<div data="abc">abc</div>
<div id="prop" data-prop="123">123</div>
<div>no data</div>

Remove image by src

I need to remove certain images with a specific src:
http://ukn.cs-mtc.com/wp-content/plugins/download-monitor/page-addon/thumbnail.gif
Is there a way to remove the whole <img> tag with JavaScript?

I had some free time (and a strange urge to write some JavaScript...), so I thought I'd offer this functional approach:
function removeNeighbour(el, elType) {
if (!el) {
return false;
}
else if (el.nextElementSibling) {
var nxt = el.nextElementSibling;
}
else {
var nxt = el.nextSibling;
while (nxt.nodeType !== 1 && nxt.nextSibling) {
nxt = nxt.nextSibling;
}
}
if (elType && nxt.tagName.toLowerCase() == elType.toLowerCase()) {
nxt.parentNode.removeChild(nxt);
}
else if (!elType) {
nxt.parentNode.removeChild(nxt);
}
}
function clearElsWithAttrEquals(el, attr, val, andNeighbour, neighbourType) {
if (!el || !attr || !val) {
return false;
}
else if (document.querySelectorAll) {
var matchingElems = document.querySelectorAll(el + '[' + attr + '="' + val + '"]'),
neighbourType = neighbourType || '';
for (var i = matchingElems.length - 1; i >= 0; i--) {
if (andNeighbour === true) {
removeNeighbour(matchingElems[i], neighbourType);
}
matchingElems[i].parentNode.removeChild(matchingElems[i]);
}
}
else {
var matchingElems = document.getElementsByTagName(el),
len = (matchingElems.length - 1);
for (var i = len; i >= 0; i--) {
if (matchingElems[i][attr] == val) {
matchingElems[i].parentNode.removeChild(matchingElems[i]);
}
}
}
}
clearElsWithAttrEquals('img', 'src', 'http://ukn.cs-mtc.com/wp-content/plugins/download-monitor/page-addon/thumbnail.gif', true, 'p');​​​
JS Fiddle demo.
Quick guide to (and the only documentation I'm ever likely to write for) clearElsWithAttrEquals() function:
clearElsWithAttrEquals(el, attr, val[, andNeighbour[, neighbourType]]);
el : (string) identifies the element type ('img','p','span'...).
attr : (string) identifies which attribute you want to search by ('id', 'src', etc...)
val : (string) this will only match if the value is exactly equal to the string
andNeighbour : (Boolean, optional) do you want to remove the neighbouring element too? Pass true (if yes) or false (if not).
neighbourType : (string, optional) remove the neighbour only if it's of this element-type ('div','hr','span', etc) ; if omitted then the next sibling element will be removed regardless of its type.
References:
document.querySelectorAll() (Compatibility).
nextElementSibling (Compatibility).
nextSibling (Compatibility).
node.nodeType (Compatibility).
parentNode (Compatibility).
removeChild() (Compatibility).
String.toLowerCase().
while (condition) {/*...*/}.

Do you use jQuery? If so,
$('img[src="http://ukn.cs-mtc.com/wp-content/plugins/download-monitor/page-addon/thumbnail.gif"]').remove(); should work.
Otherwise...
var img = document.getElementsByTagName('img');
for(var i=0,i<img.length;i++) {
if(img[i].src == 'http://ukn.cs-mtc.com/wp-content/plugins/download-monitor/page-addon/thumbnail.gif') {
img[i].parentNode.removeChild(img[i]);
}
}

This can be done easily with jQuery:
$('img[src="<path>"]').remove();