Hide list items when clicked anywhere else on the page

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
    }
});