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

Question

I have an "autocomplete" text field and I want that once an option is selected from this autocomplete list, the user will have to click on the "go to page" button to go to that particular link. 我有一个“自动完成”文本字段，我希望一旦从该自动完成列表中选择了一个选项，用户就必须单击“转到页面”按钮以转到该特定链接。

But I dont know how to link the URL with the onclick event. 但是我不知道如何将URL与onclick事件链接。 Anyone can help me? 有人可以帮助我吗？

CURRENT CODE 当前代码

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

Thanks for your help 谢谢你的帮助

Answer 1

javascript: 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: 的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"/>

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-04-01 11:51:58

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-04-01 11:51:58

解决方案1
0 已采纳 2015-04-01 11:51:58