如何将按钮（onclick 事件）与 jQuery 自动完成连接起来

Question

我有一个 "autocomplete" 文本字段，我希望一旦从此自动完成列表中选择了一个选项，用户将必须单击 "go to page" 按钮才能转到该特定 link.

但我不知道如何使用 onclick 事件 link URL。任何人都可以帮助我吗？

当前代码

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

感谢您的帮助

Answer 1

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

如何将按钮（onclick 事件）与 jQuery 自动完成连接起来

How to connect button (onclick event) with jQuery autocomplete

javascript

jquery

autocomplete

onclick

href