は、mysql ajaxドロップダウンメニューをクリックした後、リンクにリダイレクトされます

Question

私はその下の提案ドロップダウンメニューで検索メニューに取り組んでいます。提案をクリックすると、製品にリダイレクトする必要があります。現在、このコードを使用して

イム：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.search-box input[type="text"]').on("keyup input", function(){ 
     /* Get input value on change */ 
     var inputVal = $(this).val(); 
     var resultDropdown = $(this).siblings(".result"); 
     if(inputVal.length){ 
      $.get("./includes/backend-search.php", {term: inputVal}).done(function(data){ 
       // Display the returned data in browser 
       resultDropdown.html(data); 
       var link = data; 
      }); 
     } else{ 
      resultDropdown.empty(); 
     } 
    }); 

    // Set search input value on click of result item 
    $(document).on("click", ".result p", function(){ 
     $(this).parents(".search-box").find('input[type="text"]').val($(this).text()); 
     $(this).parent(".result").empty(); 
     window.location = link; 
    }); 
}); 
</script> 

そして、ここでは、私は現在のonclickでwindow.locationの機能を使用してリンクを開くしようとしているHTML

<div class="search-box"> 
      <input type="text" autocomplete="off" placeholder="Search product..." /> 
      <div class="result"></div> 
     </div> 

の私の検索ボックスであります関数。リンクは、提案されたデータからvarとして設定されます。

これまでのところ、それはリンクされていないので動作しません。 誰にでもこれを修正する方法がありますか？ありがとう、 - ジュリアン。

Answer 1

私はこのようなことを達成したいと思います。あなたはリンクの宣言に間違いがあります。それをグローバル宣言しなければなりません。それがあなたのために働くことを望みます。

$(document).ready(function(){ 
 
var link; 
 
    $('.search-box input[type="text"]').on("keyup input", function(){ 
 
     /* Get input value on change */ 
 
     var inputVal = $(this).val(); 
 
     var resultDropdown = $(this).siblings(".result"); 
 
     if(inputVal.length){ 
 
      for(var i = 0; i<= 20; i++){ 
 
       var suggessions = "<p>" + i + "</p>"; 
 
       resultDropdown.html(suggessions); 
 
       link = i; 
 
      } 
 
     } else{ 
 
      resultDropdown.empty(); 
 
     } 
 
    }); 
 

 
    // Set search input value on click of result item 
 
    $(document).on("click", ".result p", function(){ 
 
     $(this).parents(".search-box").find('input[type="text"]').val($(this).text()); 
 
     $(this).parent(".result").empty(); 
 
     console.log(link); 
 
     window.location = link; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="search-box"> 
 
      <input type="text" autocomplete="off" placeholder="Search product..." /> 
 
      <div class="result"></div> 
 
     </div>

実際のJsコードあなたが書き込みを行って、このようなものです。

$(document).ready(function(){ 
    var link; 
     $('.search-box input[type="text"]').on("keyup input", function(){ 
      /* Get input value on change */ 
      var inputVal = $(this).val(); 
      var resultDropdown = $(this).siblings(".result"); 
      if(inputVal.length){ 
       $.get("./includes/backend-search.php", {term: inputVal}).done(function(data){ 
      // Display the returned data in browser 
      resultDropdown.html(data); 
      link = data; 
     }); 
      } else{ 
       resultDropdown.empty(); 
      } 
     }); 

     // Set search input value on click of result item 
     $(document).on("click", ".result p", function(){ 
      $(this).parents(".search-box").find('input[type="text"]').val($(this).text()); 
      $(this).parent(".result").empty(); 
      console.log(link); 
      window.location = link; 
     }); 
    }); 

これはうまくいくでしょう。