JQL Autocomplete using @deviniti/jql-autocomplete-input

Jira Development Jira Cloud
1

I am trying to develop JQL_Autocomplete input field for JIRA CLOUD by using [@deviniti/jql-autocomplete-input - npm](http://@deviniti code) . I am getting only operator symbols as suggestions. I am not getting Fields suggestions.

1 Like
2

Hi,
please attach your ā€œJql componentā€ configuration. Probably something is wrong with the configuration of this promies:

getSuggestionsRequest = fieldName => fetchbyAxios(/rest/api/2/jql/autocompletedata/suggestions?fieldName=${fieldName});

3 
import React from 'react';
import JQLAutocompleteInput from './JQLAutocompleteInput';
 
 
class JQL extends React.Component {
 
    state = {
        inputValue: '',
        inputId : 'inputId'
    }
 
    fetchbyAxios=(resourceUrl) =>{
        console.log("fetchbyAxios",resourceUrl)
        return AP.request(resourceUrl);
    }
 
    getSuggestionsRequest = fieldName => {
    console.log("fieldName",fieldName)
    return this.fetchbyAxios(`/rest/api/3/jql/autocompletedata/suggestions?fieldName=${fieldName}`);  
    }

    validationRequest = jql => {
    console.log("jql in 1st",jql)
    return this.fetchbyAxios(`/rest/api/3/search?startAt=0&maxResults=10&validateQuery=strict&fields=summary&jql=${jql}`)
    }

    getAutocompleteDataRequest = (fieldName) => {
    console.log("fieldName 2 :",fieldName)
    return this.fetchbyAxios('/rest/api/3/jql/autocompletedata');
    }

    onJQLChange = (event) => {
        this.setState({
            inputValue: event.target.value
        })
    };
 
    render() {
        return (
            <JQLAutocompleteInput
                getAutocompleteDataRequest={this.getAutocompleteDataRequest}
                getSuggestionsRequest={this.getSuggestionsRequest}
                inputStyle="ak-field-text"
                initialValue={this.state.inputValue}
                inputId={this.state.inputId}
                label={'JQL123'}
                onChange={this.onJQLChange}
                setValue={this.props.setValue}
                validationRequest={this.validationRequest}
        />
        );
    }
}

export default JQL;
4

The signature of getSuggestionsRequest changed slightly but this should make a difference. Nevertheless please follow the new readme.txt for version 2.0.2 of this component:

Are you getting any response from the endpoint ā€œ/rest/api/3/jql/autocompletedata/suggestionsā€?

5

Hi,
@deviniti component used axios to invoke REST calls and when try with axios, getting the following error

ā€œblocked by CORS policy: No ā€˜Access-Control-Allow-Originā€™ header is present on the requested resource.ā€

when I try with AP.request method then I am able to get the response but getting following message on console

" Possible Unhandled Promise Rejection: TypeError: Cannot read property ā€˜visibleFieldNamesā€™ of undefined
at JQLAutocomplete.passAutocompleteData (jql-autocomplete.js?46b9:691)
at eval (JQLAutocompleteInput.js?46c7:261) "

Thank you.

6

Hi,
Now Iā€™m able to get all things but along with them, Iā€™m getting history drop down also.
Could you suggest me how to disable that.

8

Can you please share you code?