清除搜索輸入時將建議附加到搜索框

Question

我有一個帶有自動完成功能的搜索欄。 首先點擊搜索輸入，所有建議都會被添加，然后我可以搜索一個特定的單詞，但是當我清除搜索輸入（擦除輸入字段）時，應該顯示所有建議，但在清除搜索時列表顯示為空輸入標簽

我該如何解決這個問題？

 var proj_names=[] recent_content={'projects':[{'project_name':'test1'},{'project_name':'test2'},{'project_name':'test3'}]} recent_content['projects'].map((val)=>{ proj_names.push(val["project_name"]) $('.results').append(`<li class='search-list'>`+val["project_name"]+`</li>`) }) document.getElementById('myInput').addEventListener('input', (e)=>{ let projArray = []; if(e.target.value){ projArray = proj_names.filter(proj => proj.toLowerCase().includes(e.target.value)); projArray = projArray.map(proj_names => `<li class='search-list'>${proj_names}</li>`) } showprojectArray(projArray); }); function showprojectArray(projArray){ const html = !projArray.length ? '' : projArray.join(''); document.querySelector('.results').innerHTML = html; }

 #custom-search-input { margin:0; margin-top: 10px; padding: 0; } .form-control{ border-radius: 0; } #custom-search-input .search-query { padding-right: 3px; padding-right: 4px \\9; padding-left: 3px; padding-left: 4px \\9; border: 1px solid #494949 ; /* border-right-style: none; */ margin-bottom: 0; } #custom-search-input button { background-color:rgb(0,0,0,0.3) ; height: calc(1.5em + .75rem + 2px); padding: 2px 10px; position: relative; vertical-align: middle; } .ion-android-search{ font-size: 150%; } .btn-danger{ border:none; border-radius: 0; } .search-query:focus + button { z-index: 3; } .search-form { width: 100%; display: flex; } .search-form input:focus + .results { display: block } .search-form .results { display: none; position: absolute; top: 40px; left: 0; cursor: pointer; right: 0; z-index: 10; padding: 0; margin: 0; /* margin-top: 5px; */ border-width: 1px; border-style: solid; border-color: #cbcfe2 #c8cee7 #c4c7d7; border-radius: 3px; background-color: #fdfdfd; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4)); background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4); background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4); background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4); background-image: -o-linear-gradient(top, #fdfdfd, #eceef4); background-image: linear-gradient(top, #fdfdfd, #eceef4); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .search-form .results li { display: block } .search-form .results li:first-child { margin-top: -1px } .search-form .results li:first-child:before, .search-form .results li:first-child:after { display: block; content: ''; width: 0; height: 0; position: absolute; left: 50%; margin-left: -5px; border: 5px outset transparent; } .search-form .results li:first-child:before { border-bottom: 5px solid #c4c7d7; top: -2px; } .search-form .results li:first-child:after { border-bottom: 5px solid #fdfdfd; top: -10px; } .search-form .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none } .search-form .results li:last-child { margin-bottom: -1px } .search-form .results li { display: block; position: relative; margin: 0 -1px; padding: 6px 40px 6px 10px; color: #808394; font-weight: 500; text-shadow: 0 1px #fff; border: 1px solid transparent; border-radius: 3px; } .search-form .results li span { font-weight: 200 } .search-form .results li:before { content: ''; width: 18px; height: 18px; position: absolute; top: 50%; right: 10px; margin-top: -9px; /* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */ } .search-form .results li:hover { text-decoration: none; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); border-color: #28be9a #28be9a #28be9a; background-color: #28be9a; -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); } :-moz-placeholder { color: #a7aabc; font-weight: 200; } ::-webkit-input-placeholder { color: #a7aabc; font-weight: 200; } .lt-ie9 .search input { line-height: 26px }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="custom-search-input"> <div class="input-group col-md-12 "> <form class="search-form"> <input type="text" id="myInput" class=" search-query form-control search-input" placeholder="Search" /> <ul class="results" > </ul> </form> </div> </div>

Answer 1

您需要為 event.target.value 情況編寫 else 塊。

if(e.target.value){
    projArray = proj_names.filter(proj => proj.toLowerCase().includes(e.target.value));
    projArray = projArray.map(proj_names => `<li class='search-list'>${proj_names}</li>`)
  } else {
     // when e.target.value is empty show entire array.i.e. proj_names
     projArray = proj_names.map(proj_name => return `<li>${proj_name}</li>`)
  }