如何使用jQuery自动完成连接按钮（onclick事件）

我有一个“自动完成”文本字段，我希望一旦从该自动完成列表中选择一个选项，用户将不得不点击“转到页面”按钮去那个特定的链接。如何使用jQuery自动完成连接按钮（onclick事件）

但我不知道如何链接的URL与onclick事件。任何人都可以帮助我？

当前代码

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Form</title> 
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <!-- Javascript --> 
    <script> 
    /* 
    * jQuery UI Autocomplete: Using Label-Value Pairs 
    * http://salman-w.blogspot.com/2013/12/jquery-ui-autocomplete-examples.html 
    */ 
    var data = [ 
     { value: "number 01", label: "NYC", url: 'http://www.nyc.com' }, 
     { value: "number 02", label: "GOOGLE", url: 'http://www.google.com' }, 
     { value: "number 03", label: "YAHOO", url: 'http://www.yahoo.com' }, 

    ]; 
    $(function() { 
     $("#autocomplete2").autocomplete({ 
      source: data, 
      focus: function(event, ui) { 
       // prevent autocomplete from updating the textbox 
       event.preventDefault(); 
       // manually update the textbox 
       $(this).val(ui.item.label); 
      }, 
      select: function(event, ui) { 
       // prevent autocomplete from updating the textbox 
       event.preventDefault(); 
       // manually update the textbox and hidden field 
       $(this).val(ui.item.label); 
       $("#autocomplete2-value").val(ui.item.value); 
      } 
     }); 
    }); 

</script> 
</head> 
<body> 
    <!-- HTML --> 

<p>Select<br> 
    <input id="autocomplete2" type="text" placeholder="Escriba aqui"></p> 
<p>Number<br> 
    <input id="autocomplete2-value" type="text" name="code"></p> 
    <input type="button" value="Go to the page" 
      a href="ui.item.label" target="_blank"></a> 
</body> 
</html>

感谢您的帮助

来源

2015-04-01 Tebo

的javascript：

var data = [ 
    { value: "number 01", label: "NYC", url: 'http://www.nyc.com' }, 
    { value: "number 02", label: "GOOGLE", url: 'http://www.google.com' }, 
    { value: "number 03", label: "YAHOO", url: 'http://www.yahoo.com' }, 

]; 

var selectedOption; 
$(function() { 
    $("#autocomplete2").autocomplete({ 
     source: data, 
     focus: function(event, ui) { 
      // prevent autocomplete from updating the textbox 
      event.preventDefault(); 
      // manually update the textbox 
      $(this).val(ui.item.label); 
     }, 
     select: function(event, ui) { 
      // prevent autocomplete from updating the textbox 
      event.preventDefault(); 
      // manually update the textbox and hidden field 
      $(this).val(ui.item.label); 
      $("#autocomplete2-value").val(ui.item.value); 

      selectedOption = ui.item; 

     } 
    }); 
}); 

$('#btnGoToPage').on('click',function(){ 
alert(selectedOption.url); 
    window.location.href = selectedOption.url;  
});

HTML：

<p>Select<br> 
    <input id="autocomplete2" type="text" placeholder="Escriba aqui"></p> 
<p>Number<br> 
    <input id="autocomplete2-value" type="text" name="code"></p> 
    <input type="button" value="Go to the page" id="btnGoToPage"/>

来源

2015-04-01 11:51:58 Tiger

我不知道林做是错误的，但它不适合我，我需要按钮带我到下拉菜单中与所选选项相关的网络地址。例如，如果选择“纽约市”，当我点击“转到页面”按钮，这将带我到这个网址：'http://www.nyc.com'。 – Tebo 2015-04-01 19:04:30

我发布的代码工作正常..请检查此链接[http://jsfiddle.net/tigerT/v9bw3n25/](http://jsfiddle.net/tigerT/v9bw3n25/） – Tiger 2015-04-02 06:13:32

老虎，你是对的，工作。我在Wordpress中制作这个表单并且出于某种原因没有工作，但是我把doble引号放在#btnGoToPage中，并且完美地工作，你很友善。一个额外的问题是，如果我想让页面在空白页面上打开，那么最好的解决方案是什么？ – Tebo 2015-04-03 22:07:46

如何使用jQuery自动完成连接按钮（onclick事件）

回答

相关问题