สอบถามทำ dropdown จาก ul li ให้เลื่อนขึ้น - ลงด้วยคีย์บอร์ดได้

พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server

Moderator: mindphp

ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16184
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

สอบถามทำ dropdown จาก ul li ให้เลื่อนขึ้น - ลงด้วยคีย์บอร์ดได้

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

อยากให้ตัวเลือก dropdown แบบ ul li สามารถใช้คีย์บอร์ดเลื่อนขึ้น - ลงทำอย่างไรค่ะ เพราะตอนนี้เลือกค่าจากคีย์บอร์ดไม่ได้ ต้องใช้เมาส์คลิ๊กเลือก
ถ้าไม่ได้พอจะมีวิธีทำ dropdown ที่คล้ายกับแบบนี้ไหมค่ะ (ค่าที่ได้มาจาก ajax)

โค้ด: เลือกทั้งหมด

<fieldset id="stock_search">
            <input name="keywords" id="keywords" type="search" maxlength="128" title="คำที่ต้องการค้นหา" class="inputbox search tiny" size="20" value="" placeholder="ค้นหา ..." autocomplete="off">
            <ul class="dropdown-search" id="dropdown-search" style="display: block;">
               <li class="suggest_search">test</li>
               <li class="suggest_search">test เพิ่ม</li>
            </ul>
          
    <input name="submit" type="submit" class="submit" id="searchsubmit" title="Search" alt="Search" value="">
          
    </fieldset>

Selection_999(1241).png
Selection_999(1241).png (6.64 KiB) Viewed 4768 times
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามทำ dropdown จาก ul li ให้เลื่อนขึ้น - ลงด้วยคีย์บอร์ดได้

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ปกติถ้าใช้ jQuery เลือกตัวเลือกจาก keyboard ได้อยู่นะครับ
ลองเล่นจาก jqueryui
https://jqueryui.com/autocomplete/
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
eange08
PHP VIP Members
PHP VIP Members
โพสต์: 16184
ลงทะเบียนเมื่อ: 22/12/2020 10:09 am

Re: สอบถามทำ dropdown จาก ul li ให้เลื่อนขึ้น - ลงด้วยคีย์บอร์ดได้

โพสต์ที่ยังไม่ได้อ่าน โดย eange08 »

ขอบคุณค่ะ ทำได้แล้วนะคะ
โดยที่ หน้า HTML

โค้ด: เลือกทั้งหมด

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <!-- เรียกใช้ css ของ autocomplete -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script> <!-- เรียกใช้ jquery ถ้ามีอยู่แล้วไม่ต้องเรียกซ้ำ -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <!-- เรียกใช้ฟังกชั่น ่jquery ของตัว Widgets ซึ่งมี autocomplete ให้เรียกใช้ -->

<script>
    jQuery(function ($) {
        $("#keywords").keyup(function () {
            let searchText = $(this).val(); //เรียกคำที่พิมพ์ในช่องค้นหา
            if (searchText != "") {
                $.ajax({
                    url: "{URL}", //URL ของ ajax ที่ค้นหาคำและ return ผลลัพท์ออกมา
                    method: "post",
                    data: {
                        query: searchText,
                    },
                    success: function (response) {         //ถ้ามีคำ เอา response มาใส่ส่วน autocomplete ตรงนี้
                        $( "#keywords" ).autocomplete({
                            source: response
                        });
                    },
                });
            }
        });
    });
</script>
<input name="keywords" id="keywords" type="search" maxlength="128"  />

ปรับแต่ง CSS ตัวอักษรกับเส้นใต้ และสีตอนเลือกจากที่ jquery-ui.css มีอยู่

โค้ด: เลือกทั้งหมด

/*ส่วน dropdown*/ 
 .ui-menu .ui-menu-item  {
    height: 40px;
     border-bottom:1px solid #EAEAEA;
     line-height: 2;
    font-family: 'Kanit', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
}
 /*เวลาเลือกค่าใน dropdown ให้เป็นสีเทา */ 
 .ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
    background-color: #DADADA;
}      
ผลลัพท์ที่ได้ :
Screenshot from 2023-04-24 13-04-56.png
Screenshot from 2023-04-24 13-04-56.png (8.03 KiB) Viewed 4700 times
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 73