Creating a custom field with autocomplete text field

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

3 answers

1 accepted

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.

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...

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!

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!

Wow. Massive thanks for that explanation! Does this work on both download and on-demand instances?

Hi David,

I did some additional testing and indeed you can not place javacript code in an ondemand version :/ It is not interpreted as javascript, but simply as regular text. This thread deals with the same issue:

https://answers.atlassian.com/questions/185010/upload-add-on

Yes, so I noticed. Luckily as mentioned before we'll be rolling to an internal download version soon so hopefully I can still use this!

Then Amazon hosting is still a good option ;-)

So I was able to implement this, which is nice - but I'm confused. Do I still have to create options in the background that populate this list? I was under the impression that something not presently in the list would be added automatically? Currently I get the message "Invalid value 'xxx' passed for customfield 'yyy'"

Hi David, The values available are indeed the options you add to the multiselect list in de custom field's configuration.

Hello! This script searches text only from start, is it possible to change script so, that it seraches by "contains"?

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.

  1. Create plugin with atlas-create-jira-plugin
  2. Add custom field module

    <customfield-type key="car-key" name = "Car" class="com.about.jira.customfields.car">
            <description>Car field</description>
            <resource type="velocity" name="view" location="vm/view-car.vm"/>
            <resource type="velocity" name="column-view" location="vm/view-car.vm"/>
            <resource type="velocity" name="edit" location="vm/edit-car.vm"/>
            <resource type="velocity" name="xml" location="vm/xml-car.vm"/>
            <valid-searcher package="com.atlassian.jira.plugin.system.customfieldtypes" key="textsearcher"/>
        </customfield-type>
  3. 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<String, Object> getVelocityParameters(Issue issue, CustomField field, FieldLayoutItem fieldLayoutItem)
        {
            Map<String, Object> 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;
        }
    
        }
  4. 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)
    <select class="select cf-select" name="$customField.id" id="$customField.id">
        #if (!$fieldLayoutItem || $fieldLayoutItem.required == false)
            <option value="-1">$i18n.getText("common.words.none")</option>
        #else
            #if ( !$configs.default )
            <option value="">$i18n.getText("common.words.none")</option>
            #end
        #end
        #foreach ($option in $cars)
            <option#if ($value && $value == $option.id) selected="selected"#end value="$option.id">$cfValueEncoder.encodeForHtml($option.name)</option>
            #end
        #end
    </select>
    #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.

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.

Suggest an answer

Log in or Join to answer
Community showcase
Sarah Schuster
Posted Jan 29, 2018 in Jira

What are common themes you've seen across successful & failed Jira Software implementations?

Hey everyone! My name is Sarah Schuster, and I'm a Customer Success Manager in Atlassian specializing in Jira Software Cloud. Over the next few weeks I will be posting discussion topics (8 total) to ...

2,760 views 11 18
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you
Atlassian Team Tour

Join us on the Team Tour

We're bringing product updates and pro tips on teamwork to ten cities around the world.

Save your spot