单击页面上其他任何位置时隐藏列表项

Question

I have created a search user functionality but having an issue whenever user clicks anywhere else on the page the list does not disappear until unless the user deletes all the words which he/she have written to show the matching result which is not a good thing I tried a lot but still it is not working the div is visible no mater where ever we click on all around the page.

 $(document).ready(function(e) { var start = /@/ig; var word = /@(\\w+)/ig; var $contentbox = $('#contentbox'), $display = $('#display'); $contentbox.on('keyup', function(e) { var target = e.target; var $box = $(this), content = $box.text(), go = content.match(start), name = content.match(word); len = $.trim($contentbox.text()).length; if (!$(target).is('#display') && !$(target).parents().is('#display')) { $('#display').hide(); } if (go && go.length) { $display.slideUp('show'); if (name && name.length) { var html = '<ul class="tg_1"><li><p>test 1</p></li></ul><ul class="tg_1"><li><p>test 1</p></li></ul>'; $display1.html(html).show(); } console.log(go.length); } return false; }); $(document).on("click", ".addname", function() { var username = $(this).attr('title'); var old = $("#contentbox").html(); var content = old.replace(word, ""); $("#contentbox").html(content); var E = username; $("#contentbox").append(E); $("#display").hide(); $("#contentbox").focus(); }); }); 

 .st_n_ar>form { position: relative; } #display_co, #display { position: absolute; width: 98%; background-color: #fff; padding: 10px; left: 6px; top: 123px; display: none; z-index: 99; } .st_n_ar>form>#contentbox { width: 98%; height: 81px; margin: auto; background-color: #efefef; padding: 15px 12px; padding-bottom: 45px; overflow: auto; margin-bottom: 40px !important; } .st_n_ar>form>#sb_art { position: absolute; right: 6px; bottom: -35px; background-color: #0d1927; border: none; height: 35px; line-height: 35px; text-transform: uppercase; font-size: 12px; color: #fff; padding: 0 15px; transition: ease-in-out all .5s; -webkit-transition: ease-in-out all .5s; -moz-transiotion: ease-in-out all .5s; cursor: pointer; } ul.tg_1 { padding-left: 0; list-style-type: none; overflow: hidden; margin: 0; } .tg_1>li { margin: 5px auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="st_n_ar"> <form method="POST" action="" id="postform" enctype="multipart/form-data" onsubmit="return false;"> <div id='display'></div> <div id='display_co'></div> <div id="contentbox" contenteditable="true" name="post_dt" max="200"> </div> <input type="submit" id="sb_art" class="btn_v2" value="Start Discussion" /> </form> </div> 

Jquery Fiddle Demo

Answer 1

are you looking for this?

$(document).mouseup(function(e) {
    var container = $("#contentbox");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        $('#display').html('').hide(); // hide the result div block
        $("#contentbox").text(''); // clear the field
    }
});