JQL Autocomplete using @deviniti/jql-autocomplete-input

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

1 Like

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});

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;

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”?

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.

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.

Can you please share you code?