01.<!DOCTYPE html>
02.<html>
03.<head>
04.<meta name="viewport" content="width=device-width, initial-scale=1">
05.<style>
06.body {
07. font-family: Arial, Helvetica, sans-serif;
08.}
09.
10.* {
11. box-sizing: border-box;
12.}
13.
14..row {
15. display: flex;
16.}
17.
18..left {
19. flex: 35%;
20. padding: 15px 0;
21.}
22..left h2 {
23. padding-left: 8px;
24.}
25..right {
26. flex: 65%;
27. padding: 15px;
28.}
29.#mySearch {
30. width: 100%;
31. font-size: 18px;
32. padding: 11px;
33. border:1px solid #ddd;
34.}
35.#myMenu {
36. list-style-type: none;
37. padding: 0;
38. margin: 0;
39.}
40.#myMenu li a {
41. backgrxound-color: #f6f6f6;
42. padding: 12px;
43. text-decoration: none;
44. font-size: 18px;
45. color: black;
46. display: block
47.}
48.#myMenu li a:hover {
49. background-color: #eee;
50.}
51.</style>
52.</head>
53.<body>
54.
55.<h2>ค้นหาข้อมูลสินค้า</h2>
56.<p>พิมพ์ชื่อสินค้า</p>
57.
58.<div class="row">
59. <div class="left" style="background-color:#bbb;">
60. <h2>ค้นหา</h2>
61. <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
62. <ul id="myMenu">
63. <!-- นำข้อมูลสินค้ามา while ตรงนี้ -->
64.
65. <li><a href="#">สบู่</a></li>
66. <li><a href="#">แปรงสีฟัน</a></li>
67. <li><a href="#">ยาสีฟัน</a></li>
68. <li><a href="#">มาม่า</a></li>
69. <li><a href="#">ยำๆ</a></li>
70. <li><a href="#">คุกกี้</a></li>
71. <li><a href="#">เสี่ยงทาย</a></li>
72. <li><a href="#">แอบมองเธออยู่นะจ่ะ</a></li>
73. <li><a href="#">แต่เธอไม่รู้บ้างเลย</a></li>
74. <!-- สิ้นสุดการ while -->
75. </ul>
76. </div>
77.<script>
78.function myFunction() {
79. var input, filter, ul, li, a, i;
80. input = document.getElementById("mySearch");
81. filter = input.value.toUpperCase();
82. ul = document.getElementById("myMenu");
83. li = ul.getElementsByTagName("li");
84. for (i = 0; i < li.length; i++) {
85. a = li[i].getElementsByTagName("a")[0];
86. if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
87. li[i].style.display = "";
88. } else {
89. li[i].style.display = "none";
90. }
91. }
92.}
93.</script>
94.
95.</body>
96.</html>
