$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
if (htext == '') {
alert("Pleae enter the search item.");
return false;
}
$("#lstCodelist option").each(function () {
$(this).removeClass('searchItem');
if ($(this).text().search(htext) != -1) {
$(this).addClass('searchItem');
}
});
});
});
Lets take I have a row something like this
I love to work with Jquery.
If I enter my search text as jquery its not highlighting Jquery. But my query should work in both they way regardless of CAPS or SMALL letters.
how to change my code to work like that.
thanks for your all help.
use .toUpperCase() ............. // or lowerCase
if ($(this).text().toUpperCase().indexOf(htext.toUpperCase()) != -1) {
This one should work, I believe:
$(document).ready(function () {
$("#btnhighlight").click(function() {
var htext = $("#txthighlighttext").val().toLowerCase();
if (htext === '') {
alert("Please enter the search item.");
return false;
}
$("#lstCodelist option").each(function() {
var $this = $(this);
if ($this.text().toLowerCase().indexOf(htext) !== -1) {
$this.addClass('searchItem');
} else {
$this.removeClass('searchItem');
}
});
});
});
Sidenote: indexOf is proven to be faster than search.
Related
I have an input[type=text] area and i'll paste/type a URL in it.
If pasted/typed url contains http, i want to hide $('#button') element.
If its not, keep showing the button also.
Thanks for any help.
Here is my demo code so far:
$('#pasteUrl').on('input', function () {
var str = $('#pasteUrl').val();
if (str.indexOf("http") !== -1) {
$('#button').hide();
}
});
Edit: Added "propertychange" to events as suggested by OP in the comments.
$('#pasteUrl').on('input propertychange', function (ev) {
var str = $(ev.currentTarget).val();
if (str.indexOf("http") != -1) {
$('#button').hide();
} else {
$('#button').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="pasteUrl" />
<button id="button">Go</button>
This is likely what you want - using toggle:
$('#pasteUrl').on('input propertychange', function() {
var str = $(this).val();
$('#button').toggle(str.indexOf("http") == -1);
});
I have a Jquery with event keyup.
It select dropdownList(CityId) option, which text is liked/samme as a user write in inputbox(finpost).
The problem is that only work once.. I cant see whats wrong ?!
Help
$(document).ready(function () {
$('#finpost').keyup(function ()
{
$("#CityId > option").each(function ()
{
var t = this.text.toUpperCase();
if (t.indexOf($('#finpost').val().toUpperCase()) != -1)
{
$(this).attr("selected", 'true');
return false;
}
});
});
});
This work only once because your list can have only one selected option per time, but in your script logic you are setting attribute selected to true every time you find a matching without re-initializing others options
I think you should be good to go if you try this
$(document).ready(function () {
$('#finpost').keyup(function ()
{
var matchingFound = false;
$("#CityId > option").each(function ()
{
var t = this.text.toUpperCase();
if (t.indexOf($('#finpost').val().toUpperCase()) != -1 && !matchingFound)
{
$(this).attr("selected", 'true');
matchingFound = true;
}
else {
$(this).attr("selected", "false");
}
});
});
});
Now its working. The problem wass this linie:
$(this).attr('selected', true);..
I changed it to $(this).prop('selected', true);
and its work
$(document).ready(function () {
$('#finpost').keyup(function () {
$("#CityId > option").each(function () {
var t = this.text.toUpperCase();
if (t.indexOf($('#finpost').val().toUpperCase()) != -1) {
$(this).prop('selected', true);
return false;
}
});
});
});
I have problem with indexOf.
I have search and when I type something, .mark-select li will disappear or appear, depend on key word, I want to do something when there is not words in search that contains in .marka-select li . I don't know how to check when there is not same words.
Help please!
This is my code :
$("#marka").keyup(function() {
var marka = $("#marka").val().toLowerCase();
if(marka != "") {
$(".marka-select li").hide();
$(".marka-select li").each(function() {
var trenutna_marka = $(this).attr("data-keywords").toLowerCase();
if(trenutna_marka.indexOf(marka) >=0) {
$(this).show();
}
});
} else {
$(".marka-select li").show();
}
});
Of course it is possible that I just do not understand the question but why not just add an else statement to your if indexOf check?
if(trenutna_marka.indexOf(marka) > -1) {
$(this).show();
} else {
... do something else ...
}
I am using this script : http://www.morethannothing.co.uk/wp-content/uploads/2010/01/placeholder.js to get some placeholders into IE. Works a treat for input types of text and password.
But just does'nt seem to load for Text Areas. Does anyone know of a line of code I could add to that, or maybes a little bit of jQuery or JavaScript to execute to get it to load.
Thanks in advance.
instead of $(':text[placeholder],:password[placeholder]') use $(':text[placeholder],:password[placeholder],textarea[placeholder]')
For all inputs and textarea:
$('input[placeholder],textarea[placeholder]')
<script type="text/javascript">
if(navigator.userAgent.indexOf("MSIE") > 0 )
{
$(function()
{
var input = document.createElement("input");
if(('placeholder' in input) == false)
{
$('[placeholder]').focus(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder'))
{
i.val('').removeClass('placeholder');
if(i.hasClass('password'))
{
i.removeClass('password'); this.type='password';
}
}
}).blur(function()
{
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder'))
{
if(this.type=='password')
{
i.addClass('password'); this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function()
{
$(this).find('[placeholder]').each(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder')) i.val('');
});
});
}
});
}
</script>
I have a small javascript that changes the title of a input-field to it's value and some other stuff:
function autoFill(id){
if(jQuery(id).val()==""){
jQuery(id).val(jQuery(id).attr("title"))
.addClass("help");
};
jQuery(id).focus(function(){
if(jQuery(this).val()==jQuery(this).attr("title")){
jQuery(this).val("").removeClass("help");
}
})
.blur(function(){
if(jQuery(this).val()==""){
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
}
});
jQuery(".trip").submit(function(){
if(jQuery(id).val() == jQuery(id).attr("title")){
jQuery(id).val('');
}
});
}
When I try to use this script on a class that is on several nodes on one page it only works on the first. For example:
autoFill(".field");
Now I have to make it like this instead:
autoFill("#driver_from");
autoFill("#driver_to");
autoFill("#driver_when");
autoFill("#passenger_from");
autoFill("#passenger_to");
autoFill("#passenger_when");
how do I make it so that it works on every field instead?
Something like this would work:
function autoFill(selector){
jQuery(selector).each(function() {
if(jQuery(this).val() == "") {
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
};
jQuery(".trip").submit(function(){
if(jQuery(this).val() == jQuery(this).attr("title")) {
jQuery(this).val('');
}
});
}).focus(function(){
if(jQuery(this).val() == jQuery(this).attr("title")) {
jQuery(this).val("").removeClass("help");
}
}).blur(function(){
if(jQuery(this).val() == "") {
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
}
});
}
The important part is the .val() check at the beginning, it's getting the .val() of the first match, you need to handle each separately.
Or, rewrite it as a plugin like this:
(function($) {
$.fn.autoFill = function() {
return this.each(function() {
$(".trip").submit(function(){
if($(this).val() == $(this).attr("title")) {
$(this).val('');
}
});
}).focus(function(){
if($(this).val() == $(this).attr("title")) {
$(this).val("").removeClass("help");
}
}).blur(function(){
if($(this).val() == "") {
$(this).val($(this).attr("title")).addClass("help");
}
}).blur();
};
})(jQuery);
Then you can call it like this:
$(".field").autoFill();