javascript - 如何正确重定向所选列表

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>

Answer 1

这可能是因为您在 .awesoplete 上设置的点击监听器，如果输入有任何值，您就会更改位置。您可以通过向输入添加点击监听器并停止事件传播来解决此问题。

例如:

$("#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();
});

我快速浏览了库的文档，似乎有更好的方法来完成您想要做的事情。看起来，当选择一个项目时，该库会生成一个事件 awesoplete-selectcomplete。

$(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>