របៀបបង្កើត Autocomplete ជាមួយ JQuery UI

in #cambodia6 years ago

auto.jpg

នៅក្នុងគេហទំព័រមួយគឺត្រូវតែមានប្រអប់ស្វែងរកដើម្បីងាយស្រួលដោយមិនចាំបាច់ចំនាយពេលវេលា ក្នុងការស្វែងរកអ្វីមួួយ ។ យើងខ្ញុំសូមបង្ហាញអំពី Autocomplete ដែលវាគឺជាចំនេះដឹងមួយដែរដែលគេប្រើវាសំរាប់ ស្វែងរកពាក្យដែលស្រដៀង រឺក៍ពាក្យដែលផ្ដើមដោយអក្សរដែលយើងបញ្ចូលនៅក្នុងប្រអប់ស្វែងរក (Search Box) នោះវានឹងលេចឡើងនូវពាក្យដែលផ្ដើមជាមួយនឹងអក្សរដែល យើងបានបញ្ចូលនោះភ្លាមៗ។

ថ្ងៃនេះ TechFree សូមបង្ហាញអំពីរបៀបបង្កើតនិងប្រើប្រាស់ Autocompleteនេះ ដោយការប្រើប្រាស់នូវភាសាកុំព្យូទ័រមួយគឺ JQuery ដែលជាបណ្ដុំនៃកូដរបស់ Javascript ។

១) ការទាញយក

មុននឹងធ្វើការសរសេរកូដ យើងត្រូវទាញយកបណ្ណាល័យ រឺបណ្ដុំនៃកូដមកប្រើប្រាស់ជាមុនសិន។ សូមចូលទៅកាន់ https://www.jqueryui.com/autocomplete រួចហើយសូមធ្វើការទាញយកវា ។សូមមើលរូបខាងក្រោម ៖

auto1.png

បន្ទាប់មកទៀត

auto2.png

២) ការសរសេរកូដ

ក្រោយពីទាញយករួចយករាល់ហើយ យើងត្រូវធ្វើការហៅវាយកមកប្រើនៅក្នុងកូដដែលត្រូវប្រើ ។

សូមមើលរូបខាងក្រោម ៖

  • បន្ទាត់ទី៨ គឺយើងហៅកូដរចនារបស់ jquery-ui យកមកប្រើប្រាស់
  • បន្ទាត់ទី៩ គឺ យើងហៅបណ្ដុំកូដនៃ Javascript របស់ bootstrap
  • បន្ទាត់ទី១០ គឺ យើងហៅបណ្ដុំកូដនៃ Javascript របស់ google
  • បន្ទាត់ទី១១គឺ យើងហៅបណ្ដុំកូដនៃ Javascript របស់ jquery-ui

auto3.png

កូដដែលត្រូវដំនើរការ ៖

auto4.png

៣) លទ្ធផលនៃកូដ

ក្រោយពីបញ្ចប់ការសរសេរកូដខាងលើរួចមកយើងនឹងបានលទ្ធផលដូចខាងក្រោម ៖

auto5.png

ប្រភពដើម