ADEPTSTATION

----------------------------------------------------------------------------------------------------Required dependency files:----------------------------------------------------------------------------------------------------Latest Jquery&nbsp;&nbsp;----------------------------------------------------------------------------------------------------Front - CSS----------------------------------------------------------------------------------------------------<pre><code class="language-css">&lt;style type="text/css"&gt;
 .search_result{
 border: 1px solid #ddd;
 
 position: absolute;
 width: inherit;
 background: #fff;
 z-index: 5;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 top: 35px;
 }
 .search_result .srchresulttitle{
 padding: 7px !important;
 padding-bottom: 0 !important;
 }
 .search_result a:hover{
 text-decoration: none;
 }
 .search_result a:hover .eachprod{
 background-color: #eee;
 }
 .search_result .eachprod{
 padding: 5px 10px;
 }
 .hide{
 display: none;
 }
&lt;/style&gt;</code></pre>&nbsp;----------------------------------------------------------------------------------------------------Front - Element----------------------------------------------------------------------------------------------------<pre><code class="language-xml">Product search&lt;br/&gt;
&lt;div class="col-md-12 p-0"&gt;
 &lt;input class="form-control" type="text" id="prosearchboc" name="prosearchboc" placeholder="search product" onkeyup="searchProduct()"&gt;
 &lt;div class="search_result hide"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;br/&gt;&amp;nbsp;
 </code></pre>&nbsp;&nbsp;----------------------------------------------------------------------------------------------------Search Script----------------------------------------------------------------------------------------------------Search based on kwyword<pre><code class="language-javascript">&lt;script language="javascript" type="text/javascript"&gt;
 {literal}
 function searchProduct(){
 var search_data = document.getElementById('prosearchboc').value; 
 var is_inside_mfg_suggesition = 0;
 $('#prosearchboc').on('focus', function(){
 if($('.search_result').children('.srchresulttitle').length &lt;= 1){
 if($('.search_result .srchresulttitle').hasClass("no-result")){
 $(".search_result").html('&lt;div class="srchresulttitle no-result"&gt;&lt;small&gt;&lt;b&gt;Search result&lt;/b&gt;&lt;/small&gt;&lt;/div&gt;&lt;div class="col-md-12 eachprod"&gt;No result found&lt;/div&gt;');
 }
 } else {
 
 }
 $('.search_result').removeClass('hide'); 
 });
 $('#prosearchboc').on('blur', function(){
 if(is_inside_mfg_suggesition == 0){
 $('.search_result').addClass('hide'); 
 }&amp;nbsp;
 });
 
 $('.search_result').on('mouseenter', function(){
 is_inside_mfg_suggesition = 1;
 });
 $('.search_result').on('mouseleave', function(){
 is_inside_mfg_suggesition = 0;
 });
 
 $.ajax( {
 type: "POST",
 url: "{/literal}{$base_url}{literal}product/search_product",
 data: {search_data: search_data},
 success: function(return_data){
 var html = JSON.parse(return_data);
 if(html.status != ''){
 if(html.status == '1'){
 var final_html = '&lt;div class="srchresulttitle"&gt;&lt;small&gt;&lt;b&gt;Search result&lt;/b&gt;&lt;/small&gt;&lt;/div&gt;';
 for (var i = 0; i &lt; html.product_result.length; i++) {
 var current_prod = html.product_result[i];
 final_html += '&lt;a href="'+html.site_url+'product/search?k='+current_prod['keyword_name'].toLowerCase()+'&amp;amp;i='+current_prod['keyword_id']+'"&gt;&lt;div class="col-md-12 eachprod"&gt;'+current_prod['keyword_name']+'&lt;/div&gt;&lt;/a&gt;';
 }
 $(".search_result").html(final_html);
 $('.search_result').removeClass('hide');
 
 } else if(html.status == '2'){
 console.log("No result found."); 
 $(".search_result").html('&lt;div class="srchresulttitle no-result"&gt;&lt;small&gt;&lt;b&gt;Search result&lt;/b&gt;&lt;/small&gt;&lt;/div&gt;&lt;div class="col-md-12 eachprod"&gt;No result found&lt;/div&gt;');
 $('.search_result').removeClass('hide');
 
 } else if(html.status &gt;= '3'){
 console.log("Invalid request. Please try again.");
 $(".search_result").html('&lt;div class="srchresulttitle no-result"&gt;&lt;small&gt;&lt;b&gt;Search result&lt;/b&gt;&lt;/small&gt;&lt;/div&gt;&lt;div class="col-md-12 eachprod"&gt;No result found&lt;/div&gt;');
 $('.search_result').removeClass('hide');
 } else {
 $(".search_result").html('&lt;div class="srchresulttitle no-result"&gt;&lt;small&gt;&lt;b&gt;Search result&lt;/b&gt;&lt;/small&gt;&lt;/div&gt;&lt;div class="col-md-12 eachprod"&gt;No result found&lt;/div&gt;');
 $('.search_result').removeClass('hide');
 }
 }
 },
 error: function(XMLHttpRequest, textStatus, errorThrown) {
 if (XMLHttpRequest.readyState == 4) {
 // HTTP error (can be checked by XMLHttpRequest.status and XMLHttpRequest.statusText)
 if(textStatus === 'timeout'){ 
 console.log("Failed from timeout.");
 } else {
 console.log("HTTP error.");
 }
 document.getElementById('fatching-result').style.display = 'none';
 } else if (XMLHttpRequest.readyState == 0) {
 // Network error (i.e. connection refused, access denied due to CORS, etc.)
 if(textStatus === 'timeout'){ 
 console.log("Failed from timeout.");
 } else {
 console.log("A network error occurred. Please try again.");
 }
 document.getElementById('fatching-result').style.display = 'none';
 } else {
 // something weird is happening
 if(textStatus === 'timeout'){ 
 console.log("Failed from timeout.");
 } else {
 console.log("Something weird is happening.");
 }
 document.getElementById('fatching-result').style.display = 'none';
 }
 },
 timeout: 20000,
 }).fail(function(jqXHR, textStatus){
 document.getElementById('fatching-result').style.display = 'none';
 });
 }
 {/literal}
&lt;/script&gt;</code></pre>&nbsp;

Sub links

- ../

No sub links