Versions Compared

Old Version 2

changes.mady.by.user Mohamed Elorbany

Saved on

compared with

New Version Current

changes.mady.by.user Ahmad

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
English
The example below uses the Autocomplete element of jQueryUI and this sample code. 
Thai

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


Image RemovedImage Added

Figure 1 : Adding a Text Field to the FormForm 

Thai

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

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

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

Thai

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

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

Code Block
<script>
var countries= [ 
 $(function() {
        $( "[name$=city]" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function( data ) {
                        response( $.map( data.geonames, function( item ) {
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name
                            }
                        }));
                    }
                });
            },
            minLength: 2
        });
    "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>


Image AddedImage Removed
Figure 2 : Adding a Custom HTML Script to the Form 

...

Tip

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

Thai

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

...

Thai

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


Image AddedImage Removed
Figure 3 : Preview and Check Autocomplete Field 

Thai

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

A preview and check on the Autocomplete text field showed that it is working, although it looked a little unpleasant.  Adding the following CSS to the Custom HTML improved the way the Autocomplete text field looked.

Thai

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

Code Block
<style>
    .ui-autocomplete {
        background:#fff;
        border:#000 1px solid;
        list-style:none;
        padding: 5px;
        width: 250px;
    }
    .ui-menu-item:hover{
        background:#9CE9FF;
    }
</style>

Image Removed
Figure 3 : Completed Auto Complete Field

...

Sample App

View file
nameAPP_kb_dx8_autoCompleteTextField.jwa
height250