单击输入字段时切换显示样式

Question

I want to display a dynamically generated list as long as my this particular input filed is active but as i click outside the input box list should get hidden. as you run the snipped the list is displayed regardless of whether the input field is focused or clicked on or not, i want it to be hidden when it is not focused.

so far I have tried to implement it but this is not working

 $("#pickup input").click(function() { var num = $(this).find("ul.suggestbox").length; if (num > 0) { $(".suggestbox ul").toggleClass("clickdisplay"); } }); 

 .suggestbox { overflow: auto; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 1px 1px; z-index: 1; } .clickdisplay { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <form> <div class="input-field" style="width: 30%"> <label class="label-icon" for="search"><i class="material-icons">search</i> </label> <input id="pickup" placeholder="location" type="search" autocomplete="off" required> </div> <ul class="suggestbox" id="sub_navlist"> <li> option 1 </li> <li> option 2 </li> <li> option 3 </li> <li> option 4 </li> <li> option 5 </li> <li> option 6 </li> <li> option 7 </li> </ul> </form> 

Answer 1

Try the focus and blur events:

 $("#pickup").on('focus', function() { var num = $(this).closest('form').find("ul.suggestbox").length; if (num > 0) { $(".suggestbox").addClass("clickdisplay"); } }); $("body").on('click', function(e) { if ($(e.target).closest('ul.suggestbox,#pickup').length == 0) {//check if the element selected is the input or the list var num = $("ul.suggestbox").length; if (num > 0) { $(".suggestbox").removeClass("clickdisplay"); } } }); 

 .suggestbox { overflow: hidden; height:0; background-color: #f9f9f9; max-width: 170px; margin-top:0; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 1px 1px; z-index: 1; } .clickdisplay { display: block; height:auto; } body { height: 400px; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <form> <div class="input-field" style="width: 30%"> <label class="label-icon" for="search"><i class="material-icons">search</i></br> </label> <input id="pickup" placeholder="location" type="search" autocomplete="off" required> </div> <ul class="suggestbox" id="sub_navlist"> <li>option 1</li> <li>option 2</li> <li>option 3</li> <li>option 4</li> <li>option 5</li> <li>option 6</li> <li>option 7</li> </ul> </form> 

Answer 2

The $(this) is not what you think it is.

I think you meant to do this:

 $(function() { $("#pickup").on("focus", function() { var $list = $(this).closest(".input-field").find("ul.suggestbox"); $list.toggle($list.length > 0); // show it if it is not empty }).on("blur", function() { var $list = $(this).closest(".input-field").find("ul.suggestbox"); $list.hide(); // hide this list }).focus(); }); 

 .suggestbox { overflow: auto; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 1px 1px; z-index: 1; margin-top:-3px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class="input-field" style="width: 30%"> <label class="label-icon" for="pickup"><i class="material-icons">search</i> </label> <input id="pickup" placeholder="location" type="search" autocomplete="off" required> <ul class="suggestbox" id="sub_navlist"> <li>option 1</li> <li>option 2</li> <li>option 3</li> <li>option 4</li> <li>option 5</li> <li>option 6</li> <li>option 7</li> </ul> </div> </form> 

Answer 3

You can catch click event on document and if #pickup is active, show list:

 $(document).on("click",function() { var num = $("ul.suggestbox").length; if (num > 0) { $(".suggestbox").toggle($("#pickup").is(":focus") || $(".suggestbox").is(":hover")); } }); 

 .suggestbox { overflow: auto; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 1px 1px; z-index: 1; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class="input-field" style="width: 30%"> <label class="label-icon" for="search"><i class="material-icons">search</i> </label> <input id="pickup" placeholder="location" type="search" autocomplete="off" required onkeypress="somefunction(platform, 'pickup')"> </div> <ul class="suggestbox" id="sub_navlist"><li>item1</li><li>item2</li></ul> </form>