ស្វែងយល់ពីគន្លឹះ HTML5 Datalist

លោកអ្នកប្រហែលជាធ្លាប់មាន​បទពិសោធន៍ ជាមួយនឹង​ការប្រើប្រាស់ HTML5 Datalist ដែលវានឹងបំពេញ ឬបង្ហាញអ្វីដែលអ្នកកំពុង ឬបម្រុងនឹងវាយ ក្នុងប្រអប់ ដូចជានៅពេល​លោកអ្នក វាយក្នុងប្រអប់ស្វែងរក ក្នុងវ៉ិបសាយ Google ជាដើម ។

Google-search-auto-suggest

ជាទូទៅ ប្រសិនបើអ្នកចង់បង្កើតទម្រង់​លក្ខណៈនេះ លោកអ្នកត្រូវតែបង្កើតជាមួយ JavaScript (ប្រើ Function) ។ ថ្ងៃនេះសំបុកអាយធី សូមបង្ហាញជូន​នូវវិធីថ្មី និងងាយស្រួលជាងមុន ដោយប្រើ HTML5 ធាតុ (element) <datalist> ។

ធាតុ HTML5 ថ្មីនេះអនុញ្ញាត​ឲ្យអ្នក រក្សាទុកជម្រើស ដែលវានឹងបង្ហាញឲ្យអ្នកប្រើប្រាស់​វាយនៅក្នុងប្រអប់នោះ ។

HTML5 List Attribute

ខាងក្រោមនេះ គឺជាឧទាហរណ៍ ដែលនឹងបន្ថែមចូលក្នុង list នៃប្រទេស ជាមួយនឹង <datalist>

<datalist id=”city”>
<option value=”Adelaide”>
<option value=”Bandung”>
<option value=”Bangkok”>
<option value=”Beijing”>
<option value=”Hanoi”>
<option value=”Ho Chi Minh City”>
<option value=”Hong Kong”>
<option value=”Jakarta”>
<option value=”Kuala Lumpur”>
<option value=”Osaka”>
<option value=”Seoul”>
<option value=”Shanghai”>
<option value=”Singapore”>
<option value=”Surabaya”>
<option value=”Sydney”>
<option value=”Tokyo”>
</datalist>

ឬលោកអ្នកអាចបន្ថែម៖

<input class=”destination-list” type=”text” placeholder=”From:” list=”city”>
<input class=”destination-list” type=”text” placeholder=”To:” list=”city”>

ភាពខុសគ្នារវាង Browser នីមួយៗ

ប្រភេទ Browser ដែលអាចប្រើ <datalist> បានមានដូចជា Chrome, Opera និង Firefox

នៅក្នុង Chrome វានឹងបង្ហាញជម្រើស ដែលចាប់ផ្តើមជាមួយ​អ្វីដែលយើងវាយចូល ។

ហើយម៉្យាងវិញទៀត នៅពេលដែលយើងចុចលើវាពីរដង នោះវានឹងបង្ហាញជម្រើស ដែលអាចជ្រើសបាន ។

នៅក្នុង Opera នៅពេលដែលយើងដាក់ Mouse លើវា (Focus) នោះវានឹងបង្ហាញភ្លាមៗ នូវជម្រើសទាំងអស់ ហើយបន្ទាប់មក​វានឹងតំរៀប​តាមអក្សរ​ដែលយើង​វាយ ។

ចំណែកឯនៅក្នុង Firefox វិញ វានឹងមិនបង្ហាញអ្វីទេ នៅពេលដាក់ Mouse លើវា ប៉ុន្តែវានឹងបង្ហាញជម្រើស​ដែលមាន​នៅក្នុងនោះ នៅពេលដែល​យើងវាយ ។

កម្សត់អីតែក្នុង Safari (ទម្រាំតែ IE ហៅលែងលឺ) មិនទាន់អាចប្រើនៅឡើយទេ ចំនែកឯ IE វិញគេបានដាក់របាយការណ៍ថា នៅជំនាន់ទី១០ (IE 10) នោះវានឹងស្គាល់ អាចប្រើបានដូចគេឯងវិញហើយ ។

សូមមើលគំរូ និងទាញយកពីប្រភព ។

 

អានថែមទៀត

បទបង្ហាញ​របស់​សំបុកអាយធី នៅ​បាខេម​សៀមរាប​ ២០១៣

ថ្ងៃនេះសំបុកអាយធី បាននឹងកំពុងចូលរួម​កម្មវិធីបាខេម នៅឯខេត្តសៀមរាប ដើម្បីទទួលយក និងចែករំលែកចំណេះដឹងនានា ទាក់ទងនឹងបច្ចេកវិទ្យា ឬចំណេះដឹងទូទៅ ជាដើម។ អ្នកចូលរួម និងវាគ្មិនយ៉ាង​ច្រើនកុះករ មកពីខេត្តនានា នៃប្រទេសកម្ពុជា ដែលធ្វើឲ្យចំនួនបន្ទប់សម្រាប់​ធ្វើបទបង្ហាញ មានមនុស្សចូលទស្សនា ស្ទើរពេញបន្ទប់ …

2 មតិ

  1. Good article …

  2. I don’t really understand about this…I hope you will provide more detail than this later…Thanks for your sharing.. 😉

Leave a Reply