選択したリストを正しくリダイレ​​クトする方法

Question

私の入力に問題があります。awesomplete autocomplete plugin私の機能で問題が発生しました。選択したテキストの前に入力をクリックすると、ページがリダイレクトされます。私のページがリダイレクトされる方法を見てFaとテキストを選択していないだけで、入力をクリックすると、あなたはつもりです

$(document).ready(function(){ 
 
    
 
     if (!$("#srehberText").length) return false; 
 
     var input = document.getElementById("srehberText"); 
 

 
    // Show label but insert value into the input: 
 
    new Awesomplete(input, { 
 
     list: [ 
 
      { label: "<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUxdD-Q4nIx3uIg9jBCe1oT5a9MHuWY5_pW4FoZSU-nQd1Y_WJPQ'/> Facebook", value: "https://www.facebook.com/" }, 
 
      { label: "<img src='https://hydra-media.cursecdn.com/dota2.gamepedia.com/thumb/2/25/Pounce_icon.png/16px-Pounce_icon.png?version=77c984fc4a9c8ca491ead081322fa738'/> Youtube", value: "https://www.youtube.com/" }, 
 
      { label: "China", value: "CN" }, 
 
      { label: "United States", value: "US" } 
 
     ] 
 
    }); 
 

 

 

 
    
 
    // You can search for a better version 
 
$(document).find('.awesomplete').on('click', function(e) { 
 
    if ($('#srehberText').val()) 
 
    window.location = $('#srehberText').val(); 
 
    //console.log($('#myinput').val()); 
 
}); 
 
});

input{ 
 
    padding:15px; 
 
    width:300px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.css" rel="stylesheet"/> 
 

 
<input id="srehberText" /> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.js"></script>

おそらくあなたは .awesompleteに設定したクリックのリスナーである

Answer 1

、あなたに入力に値がある場合は場所を変更します。クリックリスナーを入力に追加し、イベントの伝播を停止することで修正できます。

例：

$("#srehberText").clock(function(e){ 
    e.stopPropagation(); 
}); 

$(document).ready(function(){ 
 
    
 
    if (!$("#srehberText").length) return false; 
 
    var input = document.getElementById("srehberText"); 
 

 
    new Awesomplete(input, { 
 
     list: [ 
 
      { label: "<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUxdD-Q4nIx3uIg9jBCe1oT5a9MHuWY5_pW4FoZSU-nQd1Y_WJPQ'/> Facebook", value: "https://www.facebook.com/" }, 
 
      { label: "<img src='https://hydra-media.cursecdn.com/dota2.gamepedia.com/thumb/2/25/Pounce_icon.png/16px-Pounce_icon.png?version=77c984fc4a9c8ca491ead081322fa738'/> Youtube", value: "https://www.youtube.com/" }, 
 
      { label: "China", value: "CN" }, 
 
      { label: "United States", value: "US" } 
 
     ] 
 
    }); 
 

 
    $("#srehberText").click(function(e){ 
 
     e.stopPropagation(); 
 
    });  
 

 
    $(document).find('.awesomplete').on('click', function(e) { 
 
    if ($('#srehberText').val()) 
 
     window.location = $('#srehberText').val(); 
 
    }); 
 
});

input{ 
 
    padding:15px; 
 
    width:300px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.css" rel="stylesheet"/> 
 

 
<input id="srehberText" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.js"></script>

は、イベントの伝播を停止私はこれを行うことになっているかわからないんだけど、が動作しているようです：

$(document).find('.awesomplete').on('click', function(e) { 
    if ($('#srehberText').val()) 
    window.location = $('#srehberText').val(); 
}); 

私は図書館の資料をすばやく見て、そこにあなたがやろうとしていることをやり遂げるためのより良い方法であると考えています。アイテムが選択されたときにライブラリがイベントを生成すると思われるawesomplete-selectcomplete。入力は任意の値を持っている場合はおそらくあなたが.awesomplete` `に設定したクリックリスナーの、場所を変更しているされて

$(document).ready(function(){ 
 
    
 
    if (!$("#srehberText").length) return false; 
 
    var input = document.getElementById("srehberText"); 
 

 
    new Awesomplete(input, { 
 
     list: [ 
 
      { label: "<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUxdD-Q4nIx3uIg9jBCe1oT5a9MHuWY5_pW4FoZSU-nQd1Y_WJPQ'/> Facebook", value: "https://www.facebook.com/" }, 
 
      { label: "<img src='https://hydra-media.cursecdn.com/dota2.gamepedia.com/thumb/2/25/Pounce_icon.png/16px-Pounce_icon.png?version=77c984fc4a9c8ca491ead081322fa738'/> Youtube", value: "https://www.youtube.com/" }, 
 
      { label: "China", value: "CN" }, 
 
      { label: "United States", value: "US" } 
 
     ] 
 
    }); 
 

 
    $("#srehberText").on("awesomplete-selectcomplete", function(e){ 
 
     window.location = e.originalEvent.text.value; 
 
    }); 
 
});

input{ 
 
    padding:15px; 
 
    width:300px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.css" rel="stylesheet"/> 
 

 
<input id="srehberText" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.1/awesomplete.min.js"></script>