nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Creating a custom field with autocomplete text field

David Meacock

Hi all,

I've seen plenty of questions asked of the multi-select autocomplete field, but I'm not sure if something similar is available for the single text field. Basically, I just want the ability to have a type-ahead option on my custom field so I'm not typing "Ford Car" when I actually called the same value "Ford" on another issue.

I'm looking for something similar, if not identical, to what's available for Version and Epic fields already.

Currently we're using the OnDemand hosted solution but we'll soon be switching to an internal, Download instance. Any ideas out there?

Cheers,

Dave

Accepted answers

unknown

Hi David,

We are using JIRA 6.1.4 downloaded instance and in this version an autocomplete field is not available either. Maybe this thread will help you out:

https://answers.atlassian.com/questions/84612/how-to-add-auto-complete-rendere-to-any-custom-field

Our JIRA is currently hosted in the Amazon cloud. More info can be found here:

http://aws.amazon.com

It is a very good and reliable hosting solution that enables you to configure a hosting plan specifically for your needs.

All comments

unknown

Hi David,

We are using JIRA 6.1.4 downloaded instance and in this version an autocomplete field is not available either. Maybe this thread will help you out:

https://answers.atlassian.com/questions/84612/how-to-add-auto-complete-rendere-to-any-custom-field

Our JIRA is currently hosted in the Amazon cloud. More info can be found here:

http://aws.amazon.com

It is a very good and reliable hosting solution that enables you to configure a hosting plan specifically for your needs.

David Meacock

Thanks Benji... But am I correct in saying that answer is for multiple select lists? I am trying to add it to a standard text field entry, not a multi select list...

unknown

Hi David,

The idea is indeed to start from a multiselect list, but the javascript converts this custom field to some kind of autocomplete combobox that allows typing:

To get this behavior, you have to do the following:

1) Create a custom field that uses a multiselect list (I know it sounds weird, but this is just a way to provide all the values you need for the autocomplete)

2) Paste the following code in the description field of your custom field (credits to CK1 for providing the code):

<script type="text/javascript">
(function($) {
  
 // "customfield_10400" is the number of the custom 
 // multiselect field you want to change as e.g. 
 // seen at the end of the "configure" page url of 
 // the field you want to change this way 
  
    AJS.$("#customfield_10400 option[value='-1']").remove(); //Removes the default value "None"
    function convertMulti(id){
        if (AJS.$('#'+id+"-textarea").length == 0){
            new AJS.MultiSelect({
                element: $("#"+id),
                itemAttrDisplayed: "label",
                errorMessage: AJS.params.multiselectComponentsError
            });
  
        }
    }
  
    AJS.toInit(function(){   
        convertMulti("customfield_10400");
    })
  
    JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) {
        AJS.$("#customfield_10400 option[value='-1']").remove();
        convertMulti("customfield_10400");
    });
  
})(AJS.$);
</script>

3) Lookup the id of your custom multiselect field (in this example 10400) and replace all the id's in the javascript code by your own id's.

4) Add the field to a screen and make sure the screen is visible somewhere.

This is all you need to do to implement this kind of autocomplete text field.

Hope this solution works for you!

unknown

I have tested it on a download instance, but it is just javascript that you add to description field. In that way it is version independent.

Glad I could help!

Sam Huawey

Hi, David,

If you are talking about a custom field for JIRA issue, the simpliest way to add the autocomplete option is to create a custom field plugin. It will take you just about 30 minutes if you know how to deal with JIRA SDK.

Create plugin with atlas-create-jira-plugin

Add custom field module

&lt;customfield-type key="car-key" name = "Car" class="com.about.jira.customfields.car"&gt;
        &lt;description&gt;Car field&lt;/description&gt;
        &lt;resource type="velocity" name="view" location="vm/view-car.vm"/&gt;
        &lt;resource type="velocity" name="column-view" location="vm/view-car.vm"/&gt;
        &lt;resource type="velocity" name="edit" location="vm/edit-car.vm"/&gt;
        &lt;resource type="velocity" name="xml" location="vm/xml-car.vm"/&gt;
        &lt;valid-searcher package="com.atlassian.jira.plugin.system.customfieldtypes" key="textsearcher"/&gt;
    &lt;/customfield-type&gt;

Implement the custom field class

public class Car extends GenericTextCFType {

    private final Car[] allCars;

	// Car type should have id and name public fields


    protected Car(CustomFieldValuePersister customFieldValuePersister, GenericConfigManager genericConfigManager) {
        super(customFieldValuePersister, genericConfigManager);
        this.allCars = ...; // get the list of cars, e.g. from DB
    }

    @Override
    public Map&lt;String, Object&gt; getVelocityParameters(Issue issue, CustomField field, FieldLayoutItem fieldLayoutItem)
    {
        Map&lt;String, Object&gt; params = super.getVelocityParameters(issue, field, fieldLayoutItem);
        params.put("cars", allCars);

        params.put("default_value", getDefaultValue(field));
        params.put("value", issue != null ? field.getValue(issue) : null);
        return params;
    }

    }

Implement velocity templates. Here a piece of edit-car.vm, which I copypasted from JIRA select field

#disable_html_escaping()
#customControlHeader ($action $customField.id $customField.name $fieldLayoutItem.required $displayParameters $auiparams)
&lt;select class="select cf-select" name="$customField.id" id="$customField.id"&gt;
    #if (!$fieldLayoutItem || $fieldLayoutItem.required == false)
        &lt;option value="-1"&gt;$i18n.getText("common.words.none")&lt;/option&gt;
    #else
        #if ( !$configs.default )
        &lt;option value=""&gt;$i18n.getText("common.words.none")&lt;/option&gt;
        #end
    #end
    #foreach ($option in $cars)
        &lt;option#if ($value &amp;&amp; $value == $option.id) selected="selected"#end value="$option.id"&gt;$cfValueEncoder.encodeForHtml($option.name)&lt;/option&gt;
        #end
    #end
&lt;/select&gt;
#customControlFooter ($action $customField.id $fieldLayoutItem.fieldDescription $displayParameters $auiparams)

The thing worth mentioning is select class - JIRA replaces it with auiSelect2 class at runtime.
The other templates (view-car.vm and so on) are very simple:

#disable_html_escaping()
#if ($value)
    $cfValueEncoder.encodeForHtml($!value.toString())
#end

Again, just copypaste from JIRA template view-select.vm (WEB-INF/classes/templates/plugins)

Anyway, JIRA templates are a very good source of information.

Geoff Saulnier

If you do do the multi-select field jiggery-pokery and get it working as an autocomplete text field, is it possible to tell it to pick up the options from various sources? For example, in the Summary field, it would be great if it could search Confluence article titles and also other Jira issue Summary fields and try to match/autocomplete against that.

This seems sensible in an effort to keep to common language and not end up creating new "different" issues for stuff that's already in there somewhere, probably with a handy resolution or knowledge article.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Unanswered
Groups
Help

Find more posts tagged with

jira

cloud

jira-cloud