JSFiddle - React, Tailwind, and code Playground

HTML

<input id="input-area" type='text' placeholder="输入你想搜索的内容" ><input id="icon" data-search-btn="search-button"/><!-- 
    --><ul id="menu">
    <li class="list-menu list1">css课程</li>
    <li class="list-menu list2">javascript课程</li>
    <li class="list-menu list3">linux课程</li>
    <li class="list-menu list4">R课程</li>
    <li class="list-menu list5">C++课程</li>
    </ul>

CSS

* {
        padding: 0;
        margin: 0;

    }
    
    html {
      
    }
    
    input {
        border: 0;
       
    }
    a{
    
    	height: 30px;
    	width: 30px;
    }
   #input-area {
   	border: 1px solid #e6e8e9;
   	 padding: 0 10px;
        height: 30px;
        width: 150px;
    }
   
    #icon {
    	color: transparent;
    	/*隐藏光标*/
        width: 30px;
        height: 30px;
        background: url(http://www.iconsdb.com/icons/preview/royal-blue/google-web-search-xxl.png) no-repeat;
        background-size: contain;
        cursor: pointer;
        /*好厉害*/
    }
    #menu{
    	display: none;
    	box-sizing: border-box;
    	border:1px solid #e6e8e9;
    	position: absolute;
    	width: 170px;
    	
    	background: white;
    }
.list-menu{
	
	font-size: 10px;
	padding: 10px 0;
	list-style-type: none;
	
}
.list-menu:hover{
	background: #eee;
}

JavaScript

function handler( event ) {
  var target = $( event.target );
 
  if ( target.is( $("#input-area"))  ) {
    $("#menu").show();
  }
  // if()
  else
  	 $("#menu").hide();
}
$("html").click(handler);

$(".list-menu").click(function(e){
console.log(e.target.innerHTML);
 document.getElementById("input-area").value = e.target.innerHTML;
});