Dynamically show / hide div based on text field input

Question

I am working on a website, I have a page containing a list of persons created as follows:

<div class="personsMenu"> <div class="person"> <div class="name">John</div> <div class="age">18</div> </div> <div class="person"> <div class="name">Kate</div> <div class="age">24</div> </div> <div class="person"> <div class="name">Tom</div> <div class="age">17</div> </div> </div> 

I also have a text box <input type="Text" id="filterTextBox"/>

Using jquery I need to do the following:

When the user begins to enter text in the text box, divs where the "name" does not contain characters disappears (some kind of dynamic filter, you see only those who call, contains written characters)

So, the logic should be like this:

When a user enters a character in a text field (or deletes it), we scroll through all the "personal" divs and if the "name" div inside this "person" contains the characters that we show, otherwise we will hide it (.show () and .hide () in jquery)

And of course, if the text box is empty, we all show.

Can this be done?

Thanks for any help

Answer 1

Each time you press the .toggle() key, you can .person by passing a variable indicating whether it matches the current value and therefore should be displayed.

 $('.my-textbox').keyup(function() { var value = $(this).val(); var exp = new RegExp('^' + value, 'i'); $('.personsMenu .person').each(function() { var isMatch = exp.test($('.name', this).text()); $(this).toggle(isMatch); }); });​ 

Change the expression as you see fit. In this version, it checks that the name begins with the entered value and ignores the case.

Demo

Answer 2

Here's something to get you started. I am sure that this is far from ideal, but you did not show what you have already tried and what went wrong in your question.

 $("#filterTextBox").on("keyup", function () { var search = this.value; $(".person").show().filter(function () { return $(".name", this).text().indexOf(search) < 0; }).hide(); });​​​​​​​​​​​​​ 

Here is a working example .

Answer 3

Since you noted this with jQuery , I highly recommend using Autocomplete UI Control . I have used it in several projects and you can update the search function to use a local data store such as this. As an additional note, you might consider using <ul> and <li> 's ...

Code example

 //Search-As-You-Type $(id).find('input').autocomplete({ minLength: 2, focus: function( event, ui ) {}, select: function( event, ui ) {}, source: function(request, response){ //here is where you want to call your custom function findSite(request.term); } }); 

Answer 4

 $('input').keyup(function(){ var value = this.value $('.person') .hide() .children('.name') .filter(function(){ var re = new RegExp(value) return re.test($(this).text()) }) .parent() .show() }) 

Answer 5

Recently, I need this type of work, and I find a pleasant solution. See this jQuery popout div next to the item of my choice

Answer 6

This code search is a whole line

 $( '#input-text' ).keyup( function () { var value = $( this ).val(); $( '#filter-parant > .filter-div' ).each( function () { $('.filter-div:contains("' + value + '")').show(); $('.filter-div:not(:contains("' + value + '"))').hide(); } ); } ); 

Hope this helps you

Answer 7

Here is the script that you should use, I use and create. You should also use <ul> and <li> .

 (function($){ $.tzFilter = function(jq, phrase, type, column, ifHidden){ var new_hidden = false; if(this.last_phrase === phrase){ return false; } if(!type){ type = 'ul'; } var phrase_length = phrase.length; var words = phrase.toLowerCase().split(' '); var matches = function(elem){ elem.show() } var noMatch = function(elem){ elem.hide(); new_hidden = true } var getText = function(elem){ return elem.text() } if(column){ var index = null; if(type == 'table'){ jq.find('thead > tr:last > th').each( function(i){ if( $.trim($(this).text()) == column ){ index = i; return false; } }); } else if (type == 'ul'){ jq.find("li").each(function(i){ if(!$(this).attr('display', 'none')){ if( $.trim($(this).text()) == column ){ index = i; return false; } } }); } if(index == null){ throw('Index non trouvée: ' + column + '') } if(type == 'table'){ getText = function(elem){ return jQuery(elem.find(('td:eq(' + index + ')') )).text(); } } else if (type == 'ul') { getText = function(elem){ return jQuery(elem.find(('"li:eq(' + index + ')') )).text(); } } } // On a simplement ajouté une lettre, on va regarder pour le nouveau mot, sans devoir tout regarder à nouveau if((words.size > 1) && (phrase.substr(0, phrase_length - 1) === this.last_phrase)){ if(phrase[-1] === ' '){ this.last_phrase = phrase; return false; } // On va chercher uniquement pour le nouveau mot var words = words[-1]; // On cache uniquement les tables visibles matches = function(elem) {;} if(type == 'table'){ var elems = jq.find('tbody > tr:visible'); } else if (type == 'ul'){ var elems = jq.find('li:visible'); } } else { new_hidden = true; if(type == 'table'){ var elems = jq.find('tbody > tr') } else if (type == 'ul') { var elems = jq.find('li') } } elems.each(function(){ var elem = $(this); $.tzFilter.has_words(getText(elem), words, false) ? matches(elem) : noMatch(elem); }); last_phrase = phrase; if(ifHidden && new_hidden){ ifHidden(); } return jq; }; // On cache pour accélérer le tout $.tzFilter.last_phrase = "" $.tzFilter.has_words = function(str, words, caseSensitive){ var text = caseSensitive ? str : str.toLowerCase(); for (var i=0; i < words.length; i++){ if(text.indexOf(words[i]) === -1){ return false; } } return true; } })(jQuery);