not hiding dropdown when focus changes

Question

Let's imagine I have three inputs :

<input type="text" id="a">
<input type="text" id="b">
<input type="text" id="c">

and one div table that should drop down when writing some data into input "a" or input "b". Well the logic I want to to take is:{ if you click and add some data to input a show that table to me->table appears->if I click on input b dont hide that div, however if I click somewhere else for example in input c, hide the table. It's been 3rd day I cannot do this. P.S. My boss told not to use $timeout. It should be done with blur and focus

that code is understandable only by me, I just want to know how to perform this. — Dr. Abbos, Sep 13 '17 at 12:22
Use the keydown and keyup events and hide/show your table elements when they are triggered. Also have a look at this thread: https://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text — Leth, Sep 13 '17 at 12:24
@Dr.Abbos If that code is understandable to only you then its of no use to us. — Master Yoda, Sep 13 '17 at 12:25
I tried, it works with $timeout, and it works not really properly for example if I click on input a -> table appears -> I click on input b table still appears(that actually I wanted to do) but when I click on input b first and then change to a input table disappears — Dr. Abbos, Sep 13 '17 at 12:26
Going by your use of $timeout you are using angular. Why is this not tagged in the question? — Master Yoda, Sep 13 '17 at 12:31

score 1 · Accepted Answer · answered Sep 13 '17 at 12:26

Just wrap input a and b in same class and then use blur and focus on that class.

$(document).ready(function(){
$('#showab').hide();
$("input.change").focus(function(){
    $('#showab').show();
}); 
$("input.change").blur(function(){
    $('#showab').hide();
});
});

input{
display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="change" type="text" id="a">
<input class="change" type="text" id="b">
<input type="text" id="c">
<div id="showab">table here</div>

thanks @ab29007 I will try to implement the logic to my code, and share the answer in minutes — Dr. Abbos, Sep 13 '17 at 12:33

score 0 · Answer 2 · answered Sep 13 '17 at 12:34

$("#showData").hide();

function lookup(arg) {
    var id = arg.getAttribute('id');
    var value = this.value;
    console.log(id);
    if (id === "a" || id === "b") {
        $("#showData").show();

    } else {
        $("#showData").hide();
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="a" onkeyup="lookup(this);" onClick="lookup(this);">
<input type="text" id="b" onkeyup="lookup(this);" onClick="lookup(this);">
<input type="text" id="c" onkeyup="lookup(this);" onClick="lookup(this);">
<div id="showData">A Or B is Clicked here</div>

score 0 · Answer 3 · answered Sep 13 '17 at 12:50

You want to make use of classes when hiding or showing your div containing the table.

Also take note of the Jquery focus (click into) and blur (click out of) classes

$(".show").focus(function()
{
   $('#showTable').show();
});
  
$(".show").blur(function()
{
  $('#showTable').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="show" type="text" id="a">
<input class="show" type="text" id="b">
<input class="dontShow" type="text" id="c">
<div id="showTable" hidden="hidden">
  <table>
    <thead>
      <tr><th>test 1</th><th>test 2</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>2</td></tr>
      <tr><td>3</td><td>4</td></tr>
    </tbody>
  </table>
</div>

not hiding dropdown when focus changes

3 Answers3