Autocomplete Widget

The autocomplete widget enables users to quickly find and select an item from a pre-populated list as they type. This list can be constructed based on a RunMyProcess collection or any other datasource. There are two ways to configure an autocomplete widget:

Autocomplete with jQuery

Let's follow an example with a collection named users (with col_users as identifier in web form). We can identify 4 columns in it and their respective properties :

• Name : name
• Id : id
• Entity : entity
• Location: location

Now, we create the web interface that will retrieve the 4 fields and their ids:

• Name : id_user_name
• Id : id_user_id
• Entity : id_user_entity
• Location: id_user_location

We will need also a javascript widget id_autocomplete_script containing the following code:

/* Function if List on collection fails */  
function list_ko(result) {  
    alert("Error :" + JSON.stringify(result));  
}
/* Function if List on collection is completed */  
function list_ok(result) {
    availableTags = [];  
    /* Organize information */  
    for (i = 0; i < result.length; i++) {  
        availableTags.push({  
            "label" : result[i].name,  
            "value" : result[i].name,
            "id" : result[i].id, 
            "location" : result[i].location,  
            "entity" : result[i].entity  
        });  
    }  
    /* Reset Autocomplete widget for next use */  
    jQuery("#id_user_name").autocomplete({  
    source : availableTags  
    }); 
}

/* Function launched when minLength is reached */  
function onSearch(event, ui) {  
    var my_pattern = {};  
    my_pattern.name = {  
    "$regex" : ".*" + jQuery("#id_user_name").val() + ".*",  
    "$options" : "i"  
    };
    var options = {};  
    options.asynchronous = false; /* Load synchronously the collection content */  
    col_users.listCallback(my_pattern, options, list_ok, list_ko);
}

/* Function performed when user selects an entry */  
function onSelect(event, ui) { 
    /* Update User fields */  
    id_user_id.setValue(ui.item.id); 
    id_user_entity.setValue(ui.item.entity);
    id_user_location.setValue(ui.item.location);  
}

/* Initiate the widget */  
availableTags = [];  
jQuery("#id_user_name").autocomplete({ 
    /* Array that contains entries */
    source : availableTags,  
    /* Focus 1st entry on default */  
    autoFocus : true,
    select : onSelect,  
    search : onSearch,
    /* Number of characters from which it launch the search in collection */  
    minLength : 2
});

We configure then the collection that will be used to populate the autocomplete list:

The autocomplete widget requires jQuery and jQuery-ui libraries, add them from the Javascript tab. Make sure you add the libraries in the correct order.

Finally, save the webinterface and load it to preview the result:

Packaged Autocomplete

When the datasource of the autocomplete widget is a RunMyProcess collection, you can simply use the autocomplete option of the textinput field which packages all the scripts we used above

You can access the selected item data by using the P_selected object. In the On select script add this javascript

id_user_id.setValue(P_selected.id); 
id_user_entity.setValue(P_selected.entity);
id_user_location.setValue(P_selected.location);