Writing Div ID does Appear Div Hidden

Navigation
1

I know the question is confusing, but the question 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
  • It has the home page, in which I want to apply the script

Ok, what 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 code of the request.

I did not understand

Briefly, I need a search box, in which there are several dives hidden on the page, typing the div ID in the search box will make it appear.

But why do not you use a regular search box?

Because the hidden DIVs can not appear to any user, they will have some information, let's say, "personal."

I leave my thanks to whoever has read and much more to whom to try to help me.

Finally, for those who still do not understand the question, it will: How can I create a search field that when I type an ID of a DIV makes it appear?     

asked by anonymous 24.03.2016 / 15:22

3 answers

2

I'm not sure I've completely understood, but here's an 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;
}

Follow Fiddle: link

    
24.03.2016 / 15:54
1

First, leave the div in question with visibility: hidden; then inside your input use the onKeyUp , something 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;
}
    
24.03.2016 / 15:47
1
  

Leave the data in a hidden div is not at all safe, anyone can look at the data and change (on the client side). The ideal is to take to the page only what it will 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 looking for all elements with the hide class in the getElementsByClassName() function and hiding them. If you have any element with id equal to the value you typed, I display div .

JSFiddle Example.
Reference: Hide all elements.

    
24.03.2016 / 16:22
Data access object - DAO Determining the time at which function to execute