01.<html>
02.<head>
03.<style>
04.input {
05. padding: 12px 20px;
06. margin: 8px 0;
07. box-sizing: border-box;
08.}
09.</style>
11.<script type="text/javascript">
12.$(document).ready(function(){
13.
14. $("#txtName").change(function(){
15. $.ajax({
16. url: "returnCustomer2.php" ,
17. type: "POST",
18. data: 'sCusID=' +$("#txtName").val()
19. })
20. .success(function(result) {
21.
22. var obj = jQuery.parseJSON(result);
23.
24. if(obj == '')
25. {
26. $('input[type=text]').val('');
27. }
28. else
29. {
30. $.each(obj, function(key, inval) {
31.
32. $("#txtName").val(inval["Name"]);
33. $("#txtEmail").val(inval["Email"]);
34. });
35. }
36.
37. });
38.
39. });
40. });
41.</script>
42.</head>
43.<body>
44.
45.<?php
46. ini_set('display_errors', 1);
47. error_reporting(~0);
48.
49. $serverName = "localhost";
50. $userName = "root";
51. $userPassword = "";
52. $dbName = "mydatabase";
53.
54. $conn = mysqli_connect($serverName,$userName,$userPassword,$dbName);
55.
56. $sql = "SELECT * FROM customer";
57.
58. $query = mysqli_query($conn,$sql);
59.
60. $sql2 = "SELECT * FROM customer";
61.
62. $query2 = mysqli_query($conn,$sql2);
63.
64.?>
65.
66.<form>
67.
68.<h2>Name</h2>
69.
70. <input list="abc" id="txtName" name="txtName" size="30" autocomplete="off">
71. <datalist id="abc">
72. <?php
73. while ( $d=mysqli_fetch_assoc($query)) {
74. echo "<option value='".$d['Name']."'></option>";
75. }
76. ?>
77. </datalist>
78.
79.<h2>E-mail</h2>
80.
81. <input list="abc2" id="txtEmail" name="txtEmail" size="30" autocomplete="off">
82. <datalist id="abc2">
83. <?php
84. while ( $d=mysqli_fetch_assoc($query2)) {
85. echo "<option value='".$d['Email']."'></option>";
86. }
87. ?>
88. </datalist>
89.</form>
90.
91.</body>
92.</html>
