Question

我的输入有一些问题 - 我正在使用awesomplete autocomplete plugin问题与我的功能有关..如果我在所选文本之前单击输入，那么我的页面正在重定向...例如输入{{ 1}}并且不选择文本只点击输入，你会看到我的页面如何重定向

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;
}

Answer 1

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

例如：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

停止事件的传播似乎有效，但我不确定应该做什么：

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

我快速查看了图书馆的文档，似乎有更好的方法来做你正在尝试做的事情。当选择项awesomplete-selectcomplete时，库似乎会生成一个事件。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何正确重定向所选列表

1 个答案: