<html>

<body>
<div style='position:relative'>

<input id='search' style='height:50px;width:200px;'/>
<div  id='search_response_list' ></div>

</div>

</body>
</html>

  <script src="js/jquery3.7.1.js"></script>
  <script>
	
	function remove_json_characters(stringfy){
				
				stringfy.replace(/\\n/g, "\\n")
						.replace(/\\'/g, "\\'")
						.replace(/\\"/g, '\\"')
						.replace(/\\&/g, "\\&")
						.replace(/\\r/g, "\\r")
						.replace(/\\t/g, "\\t")
						.replace(/\\b/g, "\\b")
						.replace(/\\f/g, "\\f");
					
				return stringfy;
				
	}

  </script>
  <script>
  $( function() {

		data='';

		var request;

		$("#search").keyup(function(e) {
			if(e.keyCode != 32){
				if (request) {request.abort();}
				
				
				$("#search_response_list").html('');
				
				search_str=$("#search").val();
				//alert(search_str);
				//search_str=search_str.replace(/[^a-z0-9\s]/gi, '');
				//alert(search_str);
				if(search_str !='-' && search_str !='' ){
					data={'search':search_str};
					
					request=$.ajax({
					  type: "POST",
					  url: 'https://gamaiaegy.com/search_txt.php',
					  data: remove_json_characters(JSON.stringify(data)),
					  success: function(response){
						  
						  if(response.response_num=='0'){
							//alert('لا يوجد نتائج');  
						  }else if(response.status=='done'){

							//xx=JSON.stringify(response.selected);
							
							for(i=0;i<response.response_num;i++){
								item=response.selected[i];
								$("#search_response_list").append( "<a class='search_link' href='"+item[2]+"'><img class='search_img' src='"+item[1]+"'><span class='search_text'>"+item[0]+"<br>"+item[3]+"<span></a>" ) ;
							}
							
							//console.log(response.selected[$i][0]);
						  
						  }
					  },
					  contentType: 'application/json; charset=utf-8',
					  async: false,
					  cache: false
					});
				
				}
			}
			
		});
	
	
		
 
    
  });
  </script>
  
  
<style>
.search_text{height: 40px;line-height: 20px;display: inline-block;padding: 2px 10px 2px 0px;float: right;text-align: right;}
.search_img{ height: 40px;float: right; padding: 2px;}
.search_link{    
	display: inline-block;
    width: 100%;
    border-bottom: solid 1px #ddd;
    padding: 5px;
    box-sizing: border-box;
}
#search_response_list{
	position: absolute;
    top: 50px;
    width: 200px;
    height: 300px;
    box-sizing: border-box;
    border: solid 1px #ddd;
    overflow-y: scroll;
}
</style>
  