<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery UI Autocomplete - PHP Example</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <!-- <link type="text/css" href="css/redmond/jquery-ui-1.8rc3.custom.css" rel="stylesheet" /> --> <!-- <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8rc3.custom.min.js"></script> --> <link rel="stylesheet" type="text/css" href="jquery/css/smoothness/jquery-ui-1.8.2.custom.css"> <script type="text/javascript" src="jquery/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery/js/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript"> $(function() { $('#abbrev').val(""); $("#state").autocomplete({ source: "components/com_form/listdistrict.php", minLength: 2, select: function(event, ui) { $('#state_id').val(ui.item.id); $('#abbrev').val(ui.item.abbrev); } }); $("#state_abbrev").autocomplete({ source: "components/com_form/listdistrict.php", minLength: 2 }); }); </script> </head> <body> <div class="container"> <form action="<?php echo $PHP_SELF;?>" method="post"> <fieldset> <legend>jQuery<a href="components/com_form/listdistrict.php"> UI</a> Autocomplete Example - PHP Backend</legend> <p>Start typing the name of a state or territory of the United States</p> <p class="ui-widget"> <label for="state">State (abbreviation in separate field): </label> <input type="text" id="state" name="state" /> <input type="text" id="abbrev" name="abbrev" maxlength="2" size="2"/></p> <input type="hidden" id="state_id" name="state_id" /> <p class="ui-widget"><label for="state_abbrev">State (replaced with abbreviation): </label> <input type="text" id="state_abbrev" name="state_abbrev" /></p> <p><input type="submit" name="submit" value="Submit" /></p> </fieldset> </form> <?php if (isset($_POST['submit'])) { echo "<p>"; while (list($key,$value) = each($_POST)){ echo "<strong>" . $key . "</strong> = ".$value."<br />"; } echo "</p>"; } ?> </div> </body> </html>
