Advertisement
Guest User

Untitled

a guest
Mar 15th, 2016
79
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.63 KB | None | 0 0
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Autocomplete textbox using jQuery, PHP and MySQL by CodexWorld</title>
  6. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  7. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  8. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  9. <script>
  10. $(function() {
  11. $( "#skills" ).autocomplete({
  12. source: 'search.php'
  13. });
  14. });
  15. </script>
  16. </head>
  17. <body>
  18.  
  19. <div class="ui-widget">
  20. <label for="skills">Skills: </label>
  21. <input id="skills">
  22. </div>
  23. </body>
  24. </html>
  25.  
  26. <?php
  27. $dbHost = 'localhost';
  28. $dbUsername = 'root';
  29. $dbPassword = '';
  30. $dbName = 'codexworld';
  31. //connect with the database
  32. $db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
  33. //get search term
  34. $searchTerm = $_GET['term'];
  35. //get matched data from skills table
  36. $query = $db->query("SELECT * FROM skills WHERE skill LIKE '%".$searchTerm."%' ORDER BY skill ASC");
  37. while ($row = $query->fetch_assoc()) {
  38. $data[] = $row['skill'];
  39. }
  40. //return json data
  41. echo json_encode($data);
  42. ?>
  43.  
  44. <select id="product-name" >
  45. <option value=""> Select a product</option>
  46. <?php
  47. // $products is from your product table a 2D associative array
  48. // fetch formate like
  49. // $procucts = array(
  50. // array('name' => <product1-name>,'price' => <product1-price>),
  51. // array('name' => <product2-name>,'price' => <product2-price>),
  52. // ...............
  53. // ...............
  54. // );
  55. foreach ($products as $product) {
  56. ?>
  57. <option value="<?php echo $product['price']; ?>" ><?php echo $product['name']; ?></option>
  58. <?php
  59. }
  60. ?>
  61. </select>
  62.  
  63. <input type="text" id="product-price" name="product-price" value="" />
  64.  
  65. <script type="text/javascript">
  66. $(document).ready(function (){
  67. $("#product-name").change(function(){
  68. var price = $(this).val();
  69. $("#product-price").val(price);
  70. });
  71. });
  72. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement