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

Compare with Current View Page History

« Previous Version 4 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 "city" 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 แบบกำหนดเอง

    $(function() {
        $( "[name$=city]" ).autocomplete({
            source: function( request, response ) {
                    url: "",
                    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.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
            minLength: 2

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 "city" in "[name$=city]" in the code must be the same with that in your Field ID.

1. โดยค่าเริ่มต้นไฟล์ไลบรารี js ของ jQuery และ jQueryUI รวมอยู่ในรูปแบบ Joget
2. "city" ใน "[name $ = city]" ในรหัสจะต้องเหมือนกันกับรหัสใน 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: ดูตัวอย่างและตรวจสอบฟิลด์เติมข้อความอัตโนมัติ

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.

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

    .ui-autocomplete {
        border:#000 1px solid;
        padding: 5px;
        width: 250px;

Figure 3 : Completed Auto Complete Field

รูปที่ 3: ฟิลด์กรอกข้อมูลอัตโนมัติเสร็จสมบูรณ์

  • No labels