自动完成文本字段


下面的例子使用jQueryUI的  Autocomplete元素的 示例代码。 

  

图1:向表单添加文本字段

首先,添加一个文本字段元素的形式,并把“城市”作为字段ID。

接下来,将自定义HTML元素添加到窗体,并将以下脚本复制到自定义HTML  属性中。 

<script>
    $(function() {
        $( "[name$=city]" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url"http://ws.geonames.org/searchJSON",
                    dataType"jsonp",
                    data: {
                        featureClass"P",
                        style"full",
                        maxRows12,
                        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
                            }
                        }));
                    }
                });
            },
            minLength2
        });
    });
</script>

图2:向表单添加一个自定义的HTML脚本 

1.默认情况下,jQuery和jQueryUI的js库文件包含在Joget表单中。

2. 代码中“[ name$=city ]”中的“ city ”必须与您的Field ID中的“city” 相同。

添加脚本后,单击 在窗体生成器中的预览。键入“kua”; 文本字段将如下所示:

图3:预览和检查自动填充字段 

自动完成文本字段的预览和检查表明它正在工作,虽然看起来有点不漂亮。将下面的CSS添加到自定义HTML改进了自动填充文本字段的显示方式。

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

图3:完成的自动完成字段

Zhang Allen likes this

文档更新时间: 2018-11-08 03:48   作者:龙威