如何使用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事件）

回答

相關問題