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

【问题标题】：How to connect button (onclick event) with jQuery autocomplete如何使用 jQuery 自动完成连接按钮（onclick 事件）
【发布时间】：2015-06-05 21:51:47
【问题描述】：

我有一个“自动完成”文本字段，我希望一旦从此自动完成列表中选择了一个选项，用户就必须单击“转到页面”按钮才能转到该特定链接。

但我不知道如何将 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>

感谢您的帮助

【问题讨论】：

标签： javascript jquery autocomplete onclick href

【解决方案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"/>

【讨论】：

我不知道我是否做错了，但它对我不起作用，我需要该按钮将我带到与下拉菜单中所选选项相关的网址。例如，如果选择“NYC”，当我点击“转到页面”按钮时，这将带我到这个网址：'nyc.com'。
我发布的代码工作正常..请检查此链接http://jsfiddle.net/tigerT/v9bw3n25/
Tiger，你说得对。我在 Wordpress 中制作了这个表格，由于某种原因没有工作，但我把双引号放在#btnGoToPage 中并且工作得很好，你真好。如果我希望页面在空白页面上打开，还有一个小问题，最好的解决方案是什么？
代替window.location.href = selectedOption.url;，使用这个window.open(selectedOption.url,"_blank");