Search jQuery

jQuery Forum

jQuery Syntax assistance filter function - wrap element according to condition

in Using jQuery • 6 years ago

Using jQuery version: jquery-1.11.1.min.js
I have code that shows or hides elements according to filter.

I need help including a condition where if the browser is IE then according to the filter wrap the unmatching elements with a SPAN and hide them, and the other way around - unspan and show.
I do not know the syntax and I failed repeatedly.
I'm really stuck, please help (if you can by tweaking my code)
My Code:

 <!--This is where I filter the ListBox (select) >> (option) elements via keystrokes -->
<!--Via jQuery on my Listbox control I add a css class so I can work with it here - class ".srcItem" -->
<script type="text/javascript">
    $(document).ready(
        function () {
            var elemSrc = document.getElementById("<%=srcBox.ClientID%>");
            $(elemSrc).find("option").addClass("srcItem");
        }
        );
</script>

<script type="text/javascript">
    $(document).ready(
     function () {
         var $users = $('.srcItem');
         $('#usrSearch').keyup(function () {
             $users.show(); //THis is regular jQuery that works only in Chrome

                 return;
             }
             var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

             //Below is regular jQuery that works only in Chrome

             $users.show().filter(function () {
                 var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                 return !~text.indexOf(val);

             }).hide();

         });
     }
   );

</script>

What I'm asking for is a code adjustment that will wrap the option element with a span element incase the browser is IE.

P.S.

If my code gets minified via this post, I'm not sure why that occurs but sorry for this in advance.

Replies(18)

jakecigar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

IE does not like hiding <option>s. For that reason, it’s not a good idea. And you can’t wrap an <option> with a <span>.

Also keyup with <select> is not a good idea. Change is the best event to use with a <select>.

JΛ̊KE

Adi Solar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

I know IE doesn't hide() <option>. I wanna wrap the content with <span> and then hide it. and vise versa.

Keyup is not on select. it is on the textbox. It works great in Chrome with select and options inside.

Anyone?

watusiware

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

"I wanna wrap the content with <span> and then hide it."

<option> wrapped with <span> is INVALD HTML. The direct parent of <option> MUST be <select>.

Why not simply remove the unwanted options?

Adi Solar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

I'm counting on this to be invalid, thus it will not show in the list.

I cannot remove the options because deleting the string in the text box should "un-filter" them back into the select.

Again, this code works great in Chrome. All I need is to insert a condition if browser is IE then wrap content in span and do hide() on it. Then unwrap it and show() accordingly.

watusiware

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

If you write invalid HTML, it is unpredictable what any given browser will do with your invalid HTML. Each may have a different opinion. Most will try their darnedest to display something and do some damage control.

watusiware

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

"I cannot remove the options because deleting the string in the text box should "un-filter" them back into the select."

Of course you can.

You just have to save them and then restore them later.

Adi Solar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

right...

I'm just wondering if there ever going to be someone reading my post and actually helping with code.

jakecigar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

Consider using Autocomplete | jQuery UI.

JΛ̊KE

Adi Solar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

As I stated before the code is too complicated for me. I'm not on that level.

If there was time for me to take about 2-3 months to learn it, I would. Unfortunately I need this done now.

Otherwise I would not have asked for help tweaking the existing code.

Now I have this OTHER piece of code that is supposed to UnWrap the span on .show(). However I don't have the code for wrapping it on .hide(). and I don't know how to put the two together because in my original code filter function ends with }).hide(). I cannot find the way to insert a condition there.

if (navigator.appName == 'Microsoft Internet Explorer') {
if (this.nodeName.toUpperCase() === 'OPTION') {
var span = $(this).parent();
var opt = this;
if ($(this).parent().is('span')) {
$(opt).show();
$(span).replaceWith(opt);
}
}
} else {
$(this).show(); //all other browsers use standard .show()
}

jakecigar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

You are making it too complex. You might get it working on some version of IE, but not all. Nor will it "just work" in new browsers on new devices.

By sharing snippets of code it looks worse and worse. We can’t fix a snippet out of context.

You want the user to pick items from a select, that is so big that you added a search box to limit the <option>s. That’s not a good idea. Tiny mobile devices are the new norm, and loading a large <select> is going to be painful for the user of a cheap device.

If you make a demo in http://plnkr.co or similar, we can get a better idea of what is really going on, and perhaps be able to fix the problem.

JΛ̊KE

Adi Solar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

You're absolutely right, I'm sorry.

Here you go:

JSfiddle

jakecigar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

https://jsfiddle.net/jakecigar/vsjerbx6/ works with just about any version of jQuery and should work in just about any browser. Even versions of IE that have been forgotten.

JΛ̊KE

jakecigar

Re: Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

I updated the my first fiddle to keep the currently selected option if it is still one of the "visible" ones.

JΛ̊KE

Adi Solar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

Thank you very very much!

Tested this now and it works.

However, since I want to learn, Could you briefly explain how?

jakecigar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

$(function() { // wait till the DOM is ready
var $select = $("#srcBox").clone(); // save off an untouched copy of the select.
$('#usrSearch').keyup(function() {
var currentValue=$("#srcBox").val(); // remember what was selected
var search = squeeze($(this).val()); // squeeze what they typed in
// this is where is gets complex.
// set the srcBox to a new clone of the clone that was filtered
// then set the value back to what was selected
$("#srcBox").html($select.children().clone().filter(function() {
return squeeze($(this).text()).match( search )
})).val(currentValue)
});
});
function squeeze(v) { // since you need to squeeze both the text and the option values
// I moved it out to a function
return v.replace(/\s+/g, ' ').toLowerCase();
}

I didn’t need to write special code for IE, because it is classic jQuery code.

"Write less, Do more!"

JΛ̊KE

Adi Solar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

Thank you!. I will "sit" on this until I completely get the squeeze and clone's clone part :-)

jakecigar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

Add some console.log calls so you can see what is in those variables.

JΛ̊KE

The only reason I cloned the clone was laziness. I could have done it with just one clone. BUT, it wouldn’t have made any difference in speed.

Adi Solar

Re: jQuery Syntax assistance filter function - wrap element according to condition

6 years ago

I will follow that. I'll debug after I do some reading on squeeze and clone().

Top Reply

Response title

Attachments

jQuery Forum

jQuery Syntax assistance filter function - wrap element according to condition

Replies(18)

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Re: jQuery Syntax assistance filter function - wrap element according to condition

Statistics

Tags

Actions

Related Posts