Writing Div ID Makes Div Hidden Appear

Question

I know the question is already confused, but the doubt is simple but I have no idea how I can do it, come on.

• I have a login system
• The person logs into this site
• There is the home page, on which I want to apply the script

Okay, but what a script?

In my head it looks like this: a text field similar to a search box, in it the person will enter an ID, the ID would be both the ID of the div, and the request code.

I don’t understand

Briefly, I need a search box, in which there are several div hidden on the page, when entering the div ID in the search box, makes it appear.

But why don’t you use a normal search box?

Because hidden Ivds cannot appear to any user as they will have some information, let’s say, "personal".

I leave my thanks to those who read and more to those who try to help me.

Finally, for those who still don’t understand the question, there goes: How can I create a search field that when typing an ID of a DIV makes it appear?

Answer 1

I’m not sure I fully understand, but follow example:

Note: You will need to import Jquery.

HTML:

<label for="txtPesquisa">pesquisa</label>
<input type='text' id='txtPesquisa' />

<div class="pedidos">

  <div id="1" class="hide">
  1
  </div>

  <div id="2" class="hide">
  2
  </div>

  <div id="3" class="hide">
  3
  </div>

</div>

JS:

$(document).ready(function() {
  $("#txtPesquisa").keyup(function(index){  
    $(".pedidos div").hide();
    $(".pedidos #"+$(this).val()).show();
  });
});

CSS

.hide{
  display: none;
}

Segue Fiddle: https://jsfiddle.net/mu16vmnt/

Answer 2

First, leave the div in question with visibility: Hidden; then inside your input use the onKeyUp, sort of like this:

if(this.value > 0){ document.getElementById('div_id').style.visibility='visible'; }else{document.getElementById('div_id').style.visibility='hidden';}

#div_id {
	visibility: hidden;
}

Answer 3

Leaving the data in a hidden div is not at all safe, anyone can look at the data and change (in the client side). The ideal is to take to the page only what you use and/or the user will be allowed to see.

In pure javascript you can do as follows:

div.hide{
  display:none;
}

<script>
function showDiv(e){
	var id = e.value;
    var element = document.getElementById(id);
    var elements = new Array();
    elements = getElementsByClassName('hide');
    for(i in elements ){
     elements[i].style.display = "none";
    }
    if(element){
      element.style.display = "block";
    }
}

function getElementsByClassName(classname, node)  {
    if(!node) node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}
</script>

<input id="pesquisa" onkeyup="showDiv(this)"/>

<div id="1" class="hide">
1
</div>
<div id="22" class="hide">
22
</div>

The code above is searching all elements with the class hide in function getElementsByClassName() and hiding them. If you have any element with the id equal to the entered value, show the div.

Jsfiddle example.
Reference: Hide all Elements.