Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Autocomplete textbox using jQuery, PHP and MySQL by CodexWorld</title>
- <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
- <script src="//code.jquery.com/jquery-1.10.2.js"></script>
- <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
- <script>
- $(function() {
- $( "#skills" ).autocomplete({
- source: 'search.php'
- });
- });
- </script>
- </head>
- <body>
- <div class="ui-widget">
- <label for="skills">Skills: </label>
- <input id="skills">
- </div>
- </body>
- </html>
- <?php
- $dbHost = 'localhost';
- $dbUsername = 'root';
- $dbPassword = '';
- $dbName = 'codexworld';
- //connect with the database
- $db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
- //get search term
- $searchTerm = $_GET['term'];
- //get matched data from skills table
- $query = $db->query("SELECT * FROM skills WHERE skill LIKE '%".$searchTerm."%' ORDER BY skill ASC");
- while ($row = $query->fetch_assoc()) {
- $data[] = $row['skill'];
- }
- //return json data
- echo json_encode($data);
- ?>
- <select id="product-name" >
- <option value=""> Select a product</option>
- <?php
- // $products is from your product table a 2D associative array
- // fetch formate like
- // $procucts = array(
- // array('name' => <product1-name>,'price' => <product1-price>),
- // array('name' => <product2-name>,'price' => <product2-price>),
- // ...............
- // ...............
- // );
- foreach ($products as $product) {
- ?>
- <option value="<?php echo $product['price']; ?>" ><?php echo $product['name']; ?></option>
- <?php
- }
- ?>
- </select>
- <input type="text" id="product-price" name="product-price" value="" />
- <script type="text/javascript">
- $(document).ready(function (){
- $("#product-name").change(function(){
- var price = $(this).val();
- $("#product-price").val(price);
- });
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement