Currently, I am facing an issue with my search user functionality. Whenever a user clicks anywhere else on the page, the list of results does not disappear unless the user manually deletes all the words they have typed. This behavior is not ideal and despite numerous attempts to fix it, the problem persists. The div containing the list remains visible no matter where one clicks on 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>