You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

The example below uses the Autocomplete element of jQueryUI and this sample code. 

ตัวอย่างด้านล่างใช้ Autocomplete การเติมข้อความอัตโนมัติของjQueryUI และ sample code


Figure 1 : Adding a Text Field to the Form

รูปที่ 1: การเพิ่มฟิลด์ข้อความในแบบฟอร์ม

First, add a Text Field element to the form and put "country" as field ID.

Next, add a Custom HTML element to the form and copy the following script into the Custom HTML property. 

ขั้นแรกให้เพิ่มองค์ประกอบฟิลด์ข้อความในแบบฟอร์มและใส่ "เมือง" เป็น ID ฟิลด์

จากนั้นเพิ่มองค์ประกอบ HTML แบบกำหนดเองลงในแบบฟอร์มและคัดลอกสคริปต์ต่อไปนี้ลงในคุณสมบัติ HTML แบบกำหนดเอง

<script>
var countries= [ 
  {"label": 'Afghanistan', "code": 'AF'}, 
  {"label": 'Åland Islands', "code": 'AX'}, 
  {"label": 'Ecuador', "code": 'EC'}, 
  {"label": 'Egypt', "code": 'EG'}, 
  {"label": 'El Salvador', "code": 'SV'}, 
  {"label": 'Equatorial Guinea', "code": 'GQ'}, 
  {"label": 'Eritrea', "code": 'ER'}, 
  {"label": 'Estonia', "code": 'EE'}, 
  {"label": 'Ethiopia', "code": 'ET'}, 
  {"label": 'Falkland Islands (Malvinas)', "code": 'FK'}, 
  {"label": 'Faroe Islands', "code": 'FO'}, 
  {"label": 'Fiji', "code": 'FJ'}, 
  {"label": 'Finland', "code": 'FI'}, 
  {"label": 'France', "code": 'FR'}, 
  {"label": 'Saudi Arabia', "code": 'SA'}, 
];

$( "#country" ).autocomplete({ 
    source: countries,
    select: function (event, ui) {
        $("#countries").val(ui.item.code);  
    }
});
</script>



Figure 2 : Adding a Custom HTML Script to the Form 

รูปที่ 2: การเพิ่มสคริปต์ HTML ที่กำหนดเองไปยังแบบฟอร์ม

1. By default, the js library file of jQuery and jQueryUI is included in the Joget form.
2. The "country" in "[name$=country]" in the code must be the same with that in your Field ID.

1. โดยค่าเริ่มต้นไฟล์ไลบรารี js ของ jQuery และ jQueryUI รวมอยู่ในรูปแบบ Joget
2. "country" ใน "[name $ = country]" ในรหัสจะต้องเหมือนกันกับรหัสใน Field ID ของคุณ

After adding the script, click on Preview in Form Builder. Type "kua"; the text field will appear like this:

หลังจากเพิ่มสคริปต์คลิกที่ดูตัวอย่างในเครื่องมือสร้างแบบฟอร์ม พิมพ์ "kua"; ช่องข้อความจะปรากฏดังนี้:



Figure 3 : Preview and Check Autocomplete Field 

รูปที่ 3: ดูตัวอย่างและตรวจสอบฟิลด์เติมข้อความอัตโนมัติ

  • No labels