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

How to connect button (onclick event) with jQuery autocomplete

本文关键字：jQuery 连接 按钮 事件 onclick      更新时间：2023-09-26

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

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

  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"/>
相关文章：