Search code examples
javascriptjqueryautocompleteonclickhref

How to connect button (onclick event) with jQuery autocomplete

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

Solution

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