Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 107,514

HOME > PHP > PHP Forum > จะทำอย่างไรเมื่อต้องการเปลี่ยน Drop down list มาเป็นช่องค้นหาสินค้าแทน





 

จะทำอย่างไรเมื่อต้องการเปลี่ยน Drop down list มาเป็นช่องค้นหาสินค้าแทน

 



Topic : 132013



โพสกระทู้ ( 58 )
บทความ ( 0 )



สถานะออฟไลน์




เนื่องจากสินค้ามีจำนวนประมาณ 5,000 รายการ ใช้ Drop down list ไม่สะดวก อยากเปลี่ยนเป็น Search แทนค่ะ ทำอย่างไรค่ะ
Code (PHP)
<div class="form-group">
    <label for="product_id" class="col-sm-2 control-label">กรอกรหัสสินค้า *</label>
        <div class="col-sm-10">
            <select name="product_id" id="product_id" class="form-control" onchange="findproduct_current(this.value)">
                <option value="">
                                                --กรุณาเลือก--
                </option>                                      
					<?php
					$sqld=" select * from tbl_product";
					$resultd=$cls_con->select_base($sqld);
					while($rowd=mysqli_fetch_array($resultd))
					{ 
					$product_id=$rowd['product_id'];
					$product_name=$rowd['product_name'];                                                                                           
                ?>
                <option value="<?=$product_id;?>">
			       <?=$product_name;?>
                </option>
                <?php } ?>
            </select>
        </div>
</div>




Tag : PHP







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2018-09-10 14:48:36 By : Nattarika View : 263 Reply : 15
 

 

No. 1



โพสกระทู้ ( 157 )
บทความ ( 0 )



สถานะออฟไลน์


ลองใช้ jquery autocomplete ดูครับ
เผื่อจะตอบโจทย์






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-10 15:02:57 By : Jatmentz
 


 

No. 2



โพสกระทู้ ( 58 )
บทความ ( 0 )



สถานะออฟไลน์


มี code ตัวอย่างไหมค่ะ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-10 15:25:42 By : Nattarika
 

 

No. 3



โพสกระทู้ ( 32 )
บทความ ( 0 )



สถานะออฟไลน์


ลองศึกษา select2 ครับ
https://select2.org/getting-started/basic-usage
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-10 15:45:35 By : 2037881702931155
 


 

No. 4



โพสกระทู้ ( 58 )
บทความ ( 0 )



สถานะออฟไลน์


select2 อีกเสียงครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-10 15:51:16 By : ciockie
 


 

No. 5



โพสกระทู้ ( 3,439 )
บทความ ( 8 )



สถานะออฟไลน์


http://www.binaryintellect.net/articles/aaecb7bc-18d2-44c5-8d81-07b8cb634a0b.aspx
http://blog.teamtreehouse.com/creating-autocomplete-dropdowns-datalist-element
https://jsfiddle.net/jeremykenedy/nfnc5ogh/

คำค้น html5 datalist ajax
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-10 16:09:45 By : mr.v
 


 

No. 6



โพสกระทู้ ( 58 )
บทความ ( 0 )



สถานะออฟไลน์


เข้าไปดูตามที่แนะนำ ยังงง ไม่รู้จะเริ่มต้นอย่างไรค่ะ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-10 16:51:24 By : Nattarika
 


 

No. 7



โพสกระทู้ ( 198 )
บทความ ( 0 )



สถานะออฟไลน์


@จขกท จะงงทำไมคร๊าบ อ่านสักนิด ไม่ได้ยากเลย
select2 เขียนสองสามบรรทัดเอง
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-10 17:50:14 By : DK
 


 

No. 8



โพสกระทู้ ( 58 )
บทความ ( 0 )



สถานะออฟไลน์


ปัจจุบัน Dropdown list เลือกสินค้า แล้วแสดงจำนวน คงเหลือ และราคาสินค้าค่ะ
147
อยากให้เป็นช่อง Search ค่ะ

Code (PHP)
<div class="form-group">
    <label for="product_id" class="col-sm-2 control-label">กรอกรหัสสินค้า *</label>
        <div class="col-sm-10">
            <select name="product_id" id="product_id" class="form-control" onchange="findproduct_current(this.value)">
                <option value="">
                                                --กรุณาเลือก--
                </option>                                      
					<?php
					$sqld=" select * from tbl_product";
					$resultd=$cls_con->select_base($sqld);
					while($rowd=mysqli_fetch_array($resultd))
					{ 
					$product_id=$rowd['product_id'];
					$product_name=$rowd['product_name'];                                                                                           
                ?>
                <option value="<?=$product_id;?>">
			       <?=$product_name;?>
                </option>
                <?php } ?>
            </select>
        </div>
</div>
                            <div class="form-group">
                                <label for="product_qty" class="col-sm-2 control-label">จำนวนสินค้าปัจจุบัน</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="product_qty" id="product_qty" readonly placeholder="จำนวนปัจจุบัน">
                                </div>
                            </div>    
                                <div class="form-group">
                                <label for="product_unit" class="col-sm-2 control-label">หน่วยนับ</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="product_unit" id="product_unit" readonly placeholder="หน่วย">
                                </div>
                            </div>
                              <div class="form-group">
                                <label for="product_price" class="col-sm-2 control-label">ราคาต่อหน่วย</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="product_price" id="product_price" readonly placeholder="ราคาต่อหน่วย">
                                </div>
                            </div>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-10 19:42:47 By : Nattarika
 


 

No. 9



โพสกระทู้ ( 3,439 )
บทความ ( 8 )



สถานะออฟไลน์


ไม่รู้จะเริ่มต้นยังไง? โค้ดก็มีเป็นตัวอย่างแล้วนะครับ เยอะด้วย
คุณก็เริ่มทำแบบแยกต่างหากไปเลยไฟล์ชุดหนึ่ง โดยยังไม่ต้องไปเกี่ยวกับงานที่มีอยู่ เพื่อที่จะทดลองว่าโค้ดมันทำงานได้มั้ย ถ้ามันทำได้ ก็ดูและทำความเข้าใจว่าอะไรคืออะไร แล้วก็เลาะออกมาเฉพาะส่วนที่ต้องใช้.

นี่สั้นสุดลัดสุดแล้วนะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-10 23:09:51 By : mr.v
 


 

No. 10



โพสกระทู้ ( 7,850 )
บทความ ( 1 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 9 เขียนโดย : mr.v เมื่อวันที่ 2018-09-10 23:09:51
รายละเอียดของการตอบ ::
ยังไม่สั้นสุดครับ จ้างเขาทำสั้นกว่าครับ 55555 ล้อเล่น

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-10 23:22:17 By : Chaidhanan
 


 

No. 11



โพสกระทู้ ( 58 )
บทความ ( 0 )



สถานะออฟไลน์


ok ค่ะ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-11 09:33:46 By : Nattarika
 


 

No. 12



โพสกระทู้ ( 392 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ลองแบบนี้ดูครับ
Code (PHP)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

.left {
  flex: 35%;
  padding: 15px 0;
}
.left h2 {
  padding-left: 8px;
}
.right {
  flex: 65%;
  padding: 15px;
}
#mySearch {
  width: 100%;
  font-size: 18px;
  padding: 11px;
  border:1px solid #ddd;
}
#myMenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myMenu li a {
  backgrxound-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}
#myMenu li a:hover {
  background-color: #eee;
}
</style>
</head>
<body>

<h2>ค้นหาข้อมูลสินค้า</h2>
<p>พิมพ์ชื่อสินค้า</p>

<div class="row">
  <div class="left" style="background-color:#bbb;">
    <h2>ค้นหา</h2>
    <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
    <ul id="myMenu">
    <!-- นำข้อมูลสินค้ามา while ตรงนี้ -->
    
      <li><a href="#">สบู่</a></li>
      <li><a href="#">แปรงสีฟัน</a></li>
      <li><a href="#">ยาสีฟัน</a></li>
      <li><a href="#">มาม่า</a></li>
      <li><a href="#">ยำๆ</a></li>
      <li><a href="#">คุกกี้</a></li>
      <li><a href="#">เสี่ยงทาย</a></li>
      <li><a href="#">แอบมองเธออยู่นะจ่ะ</a></li>
      <li><a href="#">แต่เธอไม่รู้บ้างเลย</a></li>
     <!-- สิ้นสุดการ while -->
    </ul>
  </div>
<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("mySearch");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myMenu");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

</body>
</html>


ค้นหาเสร็จก็ให้คลิกแล้ว เด้งไปอีกหน้าครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-11 10:15:08 By : nobetaking
 


 

No. 13



โพสกระทู้ ( 58 )
บทความ ( 0 )



สถานะออฟไลน์


Code (PHP)
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<select name="name" id="id" class="class">
    <?php
    foreach ($variable as $value) {
    echo "<option value=".$value['values'].">".$value['name']."</option>";
    }
    ?>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    $('.class').select2({
      placeholder: "กรุณาเลือก",
      width: "30%"
    });
});
</script>


อันนี้แบบใช้ select2
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-11 10:18:44 By : ciockie
 


 

No. 14



โพสกระทู้ ( 5,093 )
บทความ ( 4 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


ผมชอบตัวนี้ ส่งค่าเป็น json จากนั้นเรียกมาใช้งานhttp:// http://easyautocomplete.com/
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-11 14:16:22 By : apisitp
 


 

No. 15



โพสกระทู้ ( 58 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณพี่ ๆ ทุกท่านค่ะ ทำได้แล้วค่ะ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-11 19:28:26 By : Nattarika
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : จะทำอย่างไรเมื่อต้องการเปลี่ยน Drop down list มาเป็นช่องค้นหาสินค้าแทน
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2019 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่