I am using this code
HTML:
<div id="message">some message</div>
<input type="text" id="myInput" />
jQuery:
$(function() {
$("#message").hide();
$("#fail").hide();
var prefix = ['HX', 'HD', 'BD', 'LS']
$('#myInput').keyup(function(e) {
var value = $(this).val();
var firstTwo = value.substr(0,2);
var firstTwoUpper = firstTwo.toUpperCase();
if(firstTwo != firstTwoUpper) {
$(this).val( value.replace(/^\w\w/, firstTwoUpper) );
}
if(value.length > 1) {
if($.inArray(firstTwoUpper, prefix) >= 0) {
$("#fail").hide();
$("#message:hidden").fadeIn();
} else {
$("#message").hide();
$("#fail:hidden").fadeIn();
}
} else {
$("#message").hide();
$("#fail").hide();
}
});
});
To be a post code check. I got the above code from here: Jquery check array perform function and it works just fine but I want to display a message containing a link which all differ from one another. For example I want code 'HX' to link to facebook and I want 'BD' to link to the BBC. How would I write the if statement correctly? I have tried various ways but I am not achieving what I need.
Could someone give me a little guideance please?
Thanks,
Ben.
This fiddle does what you might be looking for
<div id="message">Some link</div>
<div id="fail">Invalid postcode</div>
<input type="text" id="myInput" />
$(function () {
$("#message").hide();
$("#fail").hide();
var prefix = ['HX', 'HD', 'BD', 'LS'];
var links = ['http://www.facebook.com','http://www.example.com','http://www.bbc.com','#'];
$('#myInput').keyup(function (e) {
var value = $(this).val();
var firstTwo = value.substr(0, 2);
var firstTwoUpper = firstTwo.toUpperCase();
if (firstTwo != firstTwoUpper) {
$(this).val(value.replace(/^\w\w/, firstTwoUpper));
}
if (value.length > 1) {
var index = $.inArray(firstTwoUpper, prefix);
if (index >= 0) {
$("#fail").hide();
$("#message").fadeIn();
$("#message a").attr("href",links[index]).html(links[index])
} else {
$("#message").hide();
$("#fail:hidden").fadeIn();
}
} else {
$("#message").hide();
$("#fail").hide();
}
});
});
this fiddle: http://jsfiddle.net/um67M/2/
I changed prefix from an array of strings to an array of objects.
You're going to see an issue if users type really fast because of the speed of fadeIn().
$(function() {
$("#message").hide();
$("#fail").hide();
var prefix = [{code:'HX',link:'www.facebook.com'}, {code:'BD',link:'www.bbc.com'}];
$('#myInput').keyup(function(e) {
var value = $(this).val();
var firstTwo = value.substr(0,2);
var firstTwoUpper = firstTwo.toUpperCase();
if(firstTwo != firstTwoUpper) {
$(this).val( value.replace(/^\w\w/, firstTwoUpper) );
}
if(value.length > 1) {
for(var obj in prefix){
console.log(firstTwoUpper, prefix[obj].code, firstTwoUpper == prefix[obj].code);
if(firstTwoUpper === prefix[obj].code){
$("#fail").hide();
var link = ''+prefix[obj].link+'';
$("#message").append(link);
$("#message:hidden").fadeIn();
break;
}else {
$("#message").hide();
$("#fail:hidden").fadeIn();
}
};
} else {
$("#message").empty();
$("#message").hide();
$("#fail").hide();
}
});
});
$('#myInput').keyup(function (e) {
var value = $(this).val();
var firstTwo = value.substr(0, 2);
var firstTwoUpper = firstTwo.toUpperCase();
if (firstTwo != firstTwoUpper) {
$(this).val(value.replace(/^\w\w/, firstTwoUpper));
}
if (value.length > 1) {
if ($.inArray(firstTwoUpper, prefix) >= 0) {
if (firstTwoUpper == "HX") {
$("#message").empty();
$("#message").html('<p>some message</p>Google');
} else if (firstTwoUpper == "HD") {
$("#message").empty();
$("#message").html('<p>other message</p><a `enter code here`href="http://www.stackoverflow.com">Stack OverFlow</a>');
}
$("#fail").hide();
$("#message:hidden").fadeIn();
} else {
$("#message").hide();
$("#fail:hidden").fadeIn();
}
} else {
$("#message").hide();
$("#fail").hide();
}
});
the fiddle is here
fiddle
Related
var _0x3424=["\x67\x65\x74","\x2F\x73\x68\x6F\x70\x2F\x61\x6C\x6C","\x69\x6E\x64\x65\x78\x4F\x66","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x6B\x65\x79\x77\x6F\x72\x64","","\x74\x6F\x4C\x6F\x77\x65\x72\x43\x61\x73\x65","\x63\x6F\x6C\x6F\x72","\x73\x69\x7A\x65","\x2E\x69\x6E\x6E\x65\x72\x2D\x61\x72\x74\x69\x63\x6C\x65","\x67\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65","\x2E\x69\x6E\x6E\x65\x72\x2D\x61\x72\x74\x69\x63\x6C\x65\x20\x3E\x20\x61","\x2F","\x73\x70\x6C\x69\x74","\x6C\x65\x6E\x67\x74\x68","\x61\x6C\x74","\x2E\x69\x6E\x6E\x65\x72\x2D\x61\x72\x74\x69\x63\x6C\x65\x20\x3E\x20\x61\x20\x3E\x20\x69\x6D\x67","\x6E\x6F\x74\x20\x66\x6F\x75\x6E\x64","\x6C\x6F\x67","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x72\x65\x6D\x65\x6E\x65\x77\x79\x6F\x72\x6B\x2E\x63\x6F\x6D\x2F\x73\x68\x6F\x70\x2F\x61\x6C\x6C","\x3A\x76\x69\x73\x69\x62\x6C\x65","\x69\x73","\x2E\x69\x6E\x2D\x63\x61\x72\x74","\x74\x65\x78\x74","\x73\x65\x6C\x65\x63\x74\x65\x64\x49\x6E\x64\x65\x78","\x70\x72\x6F\x70","\x23\x73\x69\x7A\x65","\x65\x61\x63\x68","\x23\x73\x69\x7A\x65\x20\x6F\x70\x74\x69\x6F\x6E","\x63\x6C\x69\x63\x6B","\x5B\x6E\x61\x6D\x65\x3D\x22\x63\x6F\x6D\x6D\x69\x74\x22\x5D","\x69\x73\x63\x68\x65\x63\x6B\x6F\x75\x74","\x73\x68\x6F\x70\x2F\x61\x6C\x6C","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x72\x65\x6D\x65\x6E\x65\x77\x79\x6F\x72\x6B\x2E\x63\x6F\x6D\x2F\x63\x68\x65\x63\x6B\x6F\x75\x74","\x73\x65\x6E\x64\x4D\x65\x73\x73\x61\x67\x65","\x65\x78\x74\x65\x6E\x73\x69\x6F\x6E"];$(function(){chrome[_0x3424[36]][_0x3424[35]]({method:_0x3424[0]},function(_0xc165x1){var _0xc165x2=false;var _0xc165x3=setInterval(function(){if(window[_0x3424[4]][_0x3424[3]][_0x3424[2]](_0x3424[1])!=-1&&_0xc165x2===false){if(_0xc165x1[_0x3424[5]]!=_0x3424[6]&&_0xc165x1[_0x3424[5]]!=undefined){var _0xc165x4=_0xc165x1[_0x3424[5]][_0x3424[7]]();var _0xc165x5=_0xc165x1[_0x3424[8]][_0x3424[7]]();for(var _0xc165x6=0;_0xc165x6<$(_0x3424[10])[_0x3424[9]]();_0xc165x6++){var _0xc165x7=$(_0x3424[12])[_0xc165x6][_0x3424[11]](_0x3424[3]);var _0xc165x8=_0xc165x7[_0x3424[14]](_0x3424[13]);_0xc165x8=_0xc165x8[_0xc165x8[_0x3424[15]]-1][_0x3424[7]]();var _0xc165x9=$(_0x3424[17])[_0xc165x6][_0x3424[11]](_0x3424[16])[_0x3424[7]]();if(_0xc165x9[_0x3424[2]](_0xc165x4)!=-1&&_0xc165x8[_0x3424[2]](_0xc165x5)!=-1&&_0xc165x2===false){_0xc165x2=true;window[_0x3424[4]][_0x3424[3]]=_0xc165x7;break ;}else {console[_0x3424[19]](_0x3424[18])};};if(_0xc165x2===false){clearInterval(_0xc165x3);window[_0x3424[4]][_0x3424[3]]=_0x3424[20];};}}});var _0xc165xa=setInterval(function(){if(window[_0x3424[4]][_0x3424[3]][_0x3424[2]](_0x3424[1])== -1){if(!$(_0x3424[23])[_0x3424[22]](_0x3424[21])){$(_0x3424[29])[_0x3424[28]](function(_0xc165x6){if($(this)[_0x3424[24]]()==_0xc165x1[_0x3424[9]]){$(_0x3424[27])[_0x3424[26]](_0x3424[25],_0xc165x6)}});$(_0x3424[31])[_0x3424[30]]();}}},100);if(_0xc165x1[_0x3424[32]]==1){var _0xc165xb=setInterval(function(){if($(_0x3424[23])[_0x3424[22]](_0x3424[21])&&window[_0x3424[4]][_0x3424[3]][_0x3424[2]](_0x3424[33])== -1){window[_0x3424[4]]=_0x3424[34];clearInterval(_0xc165xb);}},100)};})});
I'm wondering if this is a strong encryption, how could someone exactly decode it? Any help would be appreciate. Thank you.
It's impossible to recover the EXACT original code once it's obfuscated, but keep in mind that the code still needs to be understandable by the compiler/interpreter so it may be "reassembled" but most likely the original structure, classes, variable names, etc... will be lost.
My try to deobfuscate your code got me this :
var _0x3424 = ["\x67\x65\x74", "\x2F\x73\x68\x6F\x70\x2F\x61\x6C\x6C", "\x69\x6E\x64\x65\x78\x4F\x66", "\x68\x72\x65\x66", "\x6C\x6F\x63\x61\x74\x69\x6F\x6E", "\x6B\x65\x79\x77\x6F\x72\x64", "", "\x74\x6F\x4C\x6F\x77\x65\x72\x43\x61\x73\x65", "\x63\x6F\x6C\x6F\x72", "\x73\x69\x7A\x65", "\x2E\x69\x6E\x6E\x65\x72\x2D\x61\x72\x74\x69\x63\x6C\x65", "\x67\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65", "\x2E\x69\x6E\x6E\x65\x72\x2D\x61\x72\x74\x69\x63\x6C\x65\x20\x3E\x20\x61", "\x2F", "\x73\x70\x6C\x69\x74", "\x6C\x65\x6E\x67\x74\x68", "\x61\x6C\x74", "\x2E\x69\x6E\x6E\x65\x72\x2D\x61\x72\x74\x69\x63\x6C\x65\x20\x3E\x20\x61\x20\x3E\x20\x69\x6D\x67", "\x6E\x6F\x74\x20\x66\x6F\x75\x6E\x64", "\x6C\x6F\x67", "\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x72\x65\x6D\x65\x6E\x65\x77\x79\x6F\x72\x6B\x2E\x63\x6F\x6D\x2F\x73\x68\x6F\x70\x2F\x61\x6C\x6C", "\x3A\x76\x69\x73\x69\x62\x6C\x65", "\x69\x73", "\x2E\x69\x6E\x2D\x63\x61\x72\x74", "\x74\x65\x78\x74", "\x73\x65\x6C\x65\x63\x74\x65\x64\x49\x6E\x64\x65\x78", "\x70\x72\x6F\x70", "\x23\x73\x69\x7A\x65", "\x65\x61\x63\x68", "\x23\x73\x69\x7A\x65\x20\x6F\x70\x74\x69\x6F\x6E", "\x63\x6C\x69\x63\x6B", "\x5B\x6E\x61\x6D\x65\x3D\x22\x63\x6F\x6D\x6D\x69\x74\x22\x5D", "\x69\x73\x63\x68\x65\x63\x6B\x6F\x75\x74", "\x73\x68\x6F\x70\x2F\x61\x6C\x6C", "\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x72\x65\x6D\x65\x6E\x65\x77\x79\x6F\x72\x6B\x2E\x63\x6F\x6D\x2F\x63\x68\x65\x63\x6B\x6F\x75\x74", "\x73\x65\x6E\x64\x4D\x65\x73\x73\x61\x67\x65", "\x65\x78\x74\x65\x6E\x73\x69\x6F\x6E"];
$(function() {
chrome[_0x3424[36]][_0x3424[35]]({
method: _0x3424[0]
}, function(_0xc165x1) {
var _0xc165x2 = false;
var _0xc165x3 = setInterval(function() {
if (window[_0x3424[4]][_0x3424[3]][_0x3424[2]](_0x3424[1]) != -1 && _0xc165x2 === false) {
if (_0xc165x1[_0x3424[5]] != _0x3424[6] && _0xc165x1[_0x3424[5]] != undefined) {
var _0xc165x4 = _0xc165x1[_0x3424[5]][_0x3424[7]]();
var _0xc165x5 = _0xc165x1[_0x3424[8]][_0x3424[7]]();
for (var _0xc165x6 = 0; _0xc165x6 < $(_0x3424[10])[_0x3424[9]](); _0xc165x6++) {
var _0xc165x7 = $(_0x3424[12])[_0xc165x6][_0x3424[11]](_0x3424[3]);
var _0xc165x8 = _0xc165x7[_0x3424[14]](_0x3424[13]);
_0xc165x8 = _0xc165x8[_0xc165x8[_0x3424[15]] - 1][_0x3424[7]]();
var _0xc165x9 = $(_0x3424[17])[_0xc165x6][_0x3424[11]](_0x3424[16])[_0x3424[7]]();
if (_0xc165x9[_0x3424[2]](_0xc165x4) != -1 && _0xc165x8[_0x3424[2]](_0xc165x5) != -1 && _0xc165x2 === false) {
_0xc165x2 = true;
window[_0x3424[4]][_0x3424[3]] = _0xc165x7;
break;
} else {
console[_0x3424[19]](_0x3424[18])
};
};
if (_0xc165x2 === false) {
clearInterval(_0xc165x3);
window[_0x3424[4]][_0x3424[3]] = _0x3424[20];
};
}
}
});
var _0xc165xa = setInterval(function() {
if (window[_0x3424[4]][_0x3424[3]][_0x3424[2]](_0x3424[1]) == -1) {
if (!$(_0x3424[23])[_0x3424[22]](_0x3424[21])) {
$(_0x3424[29])[_0x3424[28]](function(_0xc165x6) {
if ($(this)[_0x3424[24]]() == _0xc165x1[_0x3424[9]]) {
$(_0x3424[27])[_0x3424[26]](_0x3424[25], _0xc165x6)
}
});
$(_0x3424[31])[_0x3424[30]]();
}
}
}, 100);
if (_0xc165x1[_0x3424[32]] == 1) {
var _0xc165xb = setInterval(function() {
if ($(_0x3424[23])[_0x3424[22]](_0x3424[21]) && window[_0x3424[4]][_0x3424[3]][_0x3424[2]](_0x3424[33]) == -1) {
window[_0x3424[4]] = _0x3424[34];
clearInterval(_0xc165xb);
}
}, 100)
};
})
});
OK, how'd I do. Variable names will have changed of course, but the functionality of the code is completely readable
$(function () {
chrome.extension.sendMessage({ method: "get" },
function (param1) {
var var1 = false;
var intHand1 = setInterval(function () {
if (window.location.href.indexOf("/shop/all") != -1 && var1 === false) {
if (param1.keyword != "" && param1.keyword != undefined) {
var kwordlc = param1.keyword.toLowerCase();
var colorlc = param1.color.toLowerCase();
for (var i = 0; i < $(".inner-article").size() ; i++) {
var ahref = $(".inner-article > a")[i].getAttribute("href");
var ahrefsplit = ahref.split("/");
ahrefsplit = ahrefsplit[ahrefsplit.length - 1].toLowerCase();
var altlc = $(".inner-article > a > img")[i].getAttribute("alt").toLowerCase();
if (altlc.indexOf(kwordlc) != -1 && ahrefsplit.indexOf(colorlc) != -1 && var1 === false) {
var1 = true;
window.location.href = ahref;
break;
} else {
console.log("not found")
};
}; if (var1 === false) {
clearInterval(intHand1);
window.location.href = "http://www.supremenewyork.com/shop/all";
};
}
}
});
var intHand2 = setInterval(function () {
if (window.location.href.indexOf("/shop/all") == -1) {
if (!$(".in-cart").is(":visible")) {
$("#size option").each(function (param2) {
if ($(this).text() == param1.size) {
$("#size").prop("selectedIndex", param2)
}
}); $("[name='commit']").click();
}
}
}, 100);
if (param1.ischeckout == 1) {
var intHand3 = setInterval(function () {
if ($(".in-cart").is(":visible") && window.location.href.indexOf("shop/all") == -1) {
window.location = "https://www.supremenewyork.com/checkout";
clearInterval(intHand3);
}
}, 100)
};
})
});
Took me about 50 mins, and I got interrupted by a couple of phone calls, messages and emails.
I have a form with five input fields and a register button ('.register').
I want to enable the register button ONLY IF all fields have at least one character.
Here comes my code:
$(document).ready(function() {
// when page loads
$('.register').addClass('a_unclickable');
// Input validation
// Are all fields filled out?
$('input').on('keyup', function() {
var un_value = $('#username_operators').val();
var fn_value = $('#first_name_operators').val();
var ln_value = $('#last_name_operators').val();
var e_value = $('#email_operators').val();
var pw_value = $('#password_operators').val();
var pw_r_value = $('#password_repeat_operators').val();
if ((un_value.length > 0) && (fn_value.length > 0) && (ln_value.length > 0) && (e_value.length > 0) && (e_value.indexOf('#') !== -1) && (pw_value.length > 0) && (pw_r_value.length > 0)) {
$('.register').removeClass('a_unclickable');
} else {
$('.register').addClass('a_unclickable');
}
})
});
I have the feeling that there is a much easier way to achieve the same result. Does anyone of you have a compact suggestion?
That's quiet compact:
$(document).ready(function() {
// when page loads
$('.register').addClass('a_unclickable');
// Input validation
// Are all fields filled out?
$('input').on('keyup', function() {
$('.register').removeClass('a_unclickable');
$('input').each(function() {
if ($(this).val() === '') {
$('.register').addClass('a_unclickable');
}
});
})
});
A couple of things come to mind. First:
$('input').on('keyup', function() {
var valid = true;
$('#username_operators, #first_name_operators, #last_name_operators, #email_operators, #password_operators, #password_repeat_operators').each(function() {
if (/^\s*$/.test(this.value)) {
valid = false;
}
});
if (valid) {
$('.register').removeClass('a_unclickable');
}
else {
$('.register').addClass('a_unclickable');
}
});
You can combine all the Ids into one CSS selector. Really the cleanest way is to add a class name to each required input, then utilize event.target.form to find all required fields inside the form.
$('input').on('keyup', function(event) {
var valid = true;
$(event.target.form).find(".required").each(function() {
if (/^\s*$/.test(this.value)) {
valid = false;
}
});
if (valid) {
$('.register').removeClass('a_unclickable');
}
else {
$('.register').addClass('a_unclickable');
}
});
Wrap the inputs in a <div class="verifyLength" ></div>
Add the a_unclickable class to the register field by default.
Then jquery:
$('input').on('keyup', function() {
var emptyField = false;
$(".verfyLength").find("input").each(function()
{
if((this).val().length() <=0)
emptyField = true;
});
if(emptyField)
$('.register').addClass('a_unclickable');
else
$('.register').removeClass('a_unclickable');
});
Here you go JSFiddle
var arr = [un_value, fn_value, ln_value, e_value, pw_value, pw_r_value];
$.each(arr,function(i,item){ if(item.length > 0){
$('.register').removeClass('a_unclickable');
} else {
$('.register').addClass('a_unclickable');
}})
if you are able to read all the values with selector you could pass them
like:
$.each($('input'),function(i,item){ if($(item).val().length > 0){
$('.register').removeClass('a_unclickable');
} else {
$('.register').addClass('a_unclickable');
}})
Have a look at this jsfiddle:
var i = 0, count = 0;
$.each($( ":input" ), function( index, value ) {
if(value.value.length > 0) {
count++;
}
});
if(count === 6) {
console.log(true);
} else {
console.log(false)
}
on edit button click a want to submit form only if one check box checked,don't submit when 0 or more than 2 check box checked
my below code is not working
$("#editbtn_id").click(function () {
var cnt = 0;
var checkbox_value = "";
$(":checkbox").each(function () {
var ischecked = $(this).is(":checked");
});
if (ischecked) {
checkbox_value += $(this).val();
cnt = cnt + 1;
if (cnt == 0 || cnt > 1) {
alert(cnt);
alert("Please select one Test case");
return false;
}
}
return false;
});
HTML
<form action="/editSingletest/{{ testcase.id }}" method="post" onsubmit="return" >
<input type="checkbox"/>
</form>
You can achieve this by following code
$("#editbtn_id").click(function(){
var cnt=0;
var checkbox_checked_count = 0;
var form_submit = false;
$(":checkbox").each(function () {
if($(this).is(":checked")) {
checkbox_checked_count++
}
});
if(checkbox_checked_count == 1) {
form_submit = true;
}
else if(checkbox_checked_count > 1) {
alert("Please select one Test case");
}
alert(form_submit)
$("form").submit();
});
Check working example here in this fiddle
Your counter is in the wrong loop, should be something like this:
$("#editbtn_id").click(function(){
var cnt=0;
var checkbox_value = "";
$(":checkbox").each(function () {
var ischecked = $(this).is(":checked");
if (ischecked){
checkbox_value += $(this).val();
cnt=cnt + 1 ;
}
});
if(cnt==0 || cnt > 1){ ... }
});
try this
$("#editbtn_id").click(function (e) {
if($('form input[type="checkbox"]:checked').length == 1){
$('form').submit();
}
else{
e.preventDefault();
}
});
for 'form' use your form selector
I'm trying to get both labels to appear but unfortunately only one of them is showing #city_label
<script type="text/javascript">
$(document).ready(function() {
function showDiv(element, pro2) {
if (pro2.children("option:selected").val() == 2) element.show();
else element.hide();
}
var myElement = $("div#pro2");
var mypro2 = $("select#ptype");
$("select").change(function() {
showDiv(myElement, mypro2)
});
$("#ctry").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
if (stateSelect.length === 0)
$("#state_label" && "#city_label").hide();
else {
$("#state_label" && "#city_label").show();
stateSelect.show();
}
});
});
</script>
HTML code:
<label id="state_label" style="display:none">State:</label><br />
<label id="city_label" style="display:none">Postal or City:</label>
That's... not how && works. In this case, it will return its right operand. What you want is this, using a comma in the selector:
<script type="text/javascript">
$(document).ready(function() {
function showDiv(element, pro2) {
if (pro2.children("option:selected").val() == 2) element.show();
else element.hide();
}
var myElement = $("div#pro2");
var mypro2 = $("select#ptype");
$("select").change(function() {
showDiv(myElement, mypro2)
});
$("#ctry").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
if (stateSelect.length === 0)
$("#state_label, #city_label").hide();
else {
$("#state_label, #city_label").show();
stateSelect.show();
}
});
});
</script>
You can't use the && operator the way you are, to select multiple elements at once you should include them in a single string separated by a comma; try this:
if (stateSelect.length === 0)
$("#state_label,#city_label").hide();
else {
$("#state_label,#city_label").show();
stateSelect.show();
}
$('#container form').delegate('#addSearch', 'keyup', function(e) {
var tmpVAL = $('#addSearch').val();
$('.w').each(function() {
var tmpHTML = $(this).html();
if (tmpHTML == tmpVAL) {
$(this).fadeIn(250);
} else if (tmpVAL.length < 1) {
$(this).fadeIn(250);
} else {
$(this).fadeOut(250);
}
});
});
and #addSearch is an <input type="text">.
So, my problem is that; this obviously will only return the results that are an exact match to the tmpVAL - How would I allow it so every letter will change the search result.
e.g.
I type N
it comes up with No, Not, Nothing, Nothingness
I type NOT
it comes up with Not, Nothing, Nothingness
Any help would be appreciated, I would imagine that it would be RegEx?
DEMO https://so.lucafilosofi.com/autocomplete-autofilter-using-jquery-delegate
$(function() {
$('#container form').delegate('#addSearch', 'keyup', function(e) {
var tmpVAL = $('#addSearch').val();
$('.w').each(function() {
var tmpHTML = $(this).text();
var subSection = tmpHTML.substring(tmpVAL.length, 0);
if (subSection == tmpVAL && tmpVAL != '' ) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
You could use a regular expression, but I think that might be overkill. You could just use indexOf:
$('#container form').delegate('#addSearch', 'keyup', function(e) {
var tmpVAL = $('#addSearch').val().toLowerCase();
$('.w').each(function() {
var tmpHTML = $(this).html().toLowerCase();
if (tmpHTML.indexOf(tmpVAL) >= 0) {
$(this).fadeIn(250);
} else if (tmpVAL.length < 1) {
$(this).fadeIn(250);
} else {
$(this).fadeOut(250);
}
});
});
Working example: http://jsfiddle.net/andrewwhitaker/PRyvU/
Here's an alternative solution that doesn't use an .each():
$('#container form').delegate('#addSearch', 'keyup', function(e) {
var tmpVAL = $('#addSearch').val().toLowerCase();
var $words = $(".w");
var contains = function(haystack, needle) {
return haystack.indexOf(needle) >= 0;
};
if (tmpVAL.length < 1) {
$words.fadeIn(250);
}
else {
$words.filter(function() {
return !contains($(this).html().toLowerCase(), tmpVAL);
}).fadeOut(250);
$words.filter(function() {
return contains($(this).html().toLowerCase(), tmpVAL);
}).fadeIn(250);
}
});
http://jsfiddle.net/andrewwhitaker/EyJ6b/