當在頁面上的任何其他位置點擊時隱藏列表項目

Question

我創建了搜索用戶功能，但每當用戶單擊頁面上的任何其他位置時都會出現問題，直到用戶刪除他/她擁有的所有單詞書面顯示匹配的結果，這不是一件好事，我嘗試了很多，但仍然無法正常工作。div無法看到，無論我們點擊頁面上的哪個地方。

$(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

你在找這個？

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