javascript - How to connect button (onclick event) with jQuery autocomplete -
i have "autocomplete" text field , want once option selected autocomplete list, user have click on "go page" button go particular link.
but dont know how link url onclick event. can 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 updating textbox event.preventdefault(); // manually update textbox $(this).val(ui.item.label); }, select: function(event, ui) { // prevent autocomplete updating textbox event.preventdefault(); // manually update textbox , 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 page" href="ui.item.label" target="_blank"></a> </body> </html> thanks help
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 updating textbox event.preventdefault(); // manually update textbox $(this).val(ui.item.label); }, select: function(event, ui) { // prevent autocomplete updating textbox event.preventdefault(); // manually update textbox , 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 page" id="btngotopage"/>
Comments
Post a Comment