getting the autocompleter to work

[jrenee42]

i cannot get the autocompleter to work; I am using it from a react context if that matters.

there is a textarea on the page, and I am instantiating it via

this.yasgui = yasqeInstance.fromTextArea(this.textareaNode, this.props.options);

here is the code I'm trying to get it to run:

}; let customPropertyCompleter = function (yasqe) {

        //we use several functions from the regular property autocompleter (this way, we don't have to re-define code such as determining whether we are in a valid autocompletion position)
        let returnObj = {
            isValidCompletionPosition: function () {
                console.log('foo 1');
               //const result =  YASQE.Autocompleters.properties.isValidCompletionPosition(yasqe);
               // console.log('valid autocomplete pos? ' + result);
                //return result;
                return true;
            },
            preProcessToken: function (token) {
                console.log('foo 2', token);
                return YASQE.Autocompleters.properties.preProcessToken(yasqe, token);
            },
            postProcessToken: function (token, suggestedString) {
                console.log('foo 3', token);
                return YASQE.Autocompleters.properties.postProcessToken(yasqe, token, suggestedString);
            }
        };

        //In this case we assume the properties will fit in memory. So, turn on bulk loading, which will make autocompleting a lot faster
        returnObj.bulk = true;
        returnObj.async = false;

        //and, as everything is in memory, enable autoShowing the completions
        returnObj.autoShow = true;

        //returnObj.persistent = "customProperties";//this will store the sparql results in the client-cache for a month.
        returnObj.get = ['http://uri.com', 'http://abc.com', 'http://def.com'];

        return returnObj;
    };

yasqeInstance.registerAutocompleter('customClassCompleter', customClassCompleter);

    //And, to make sure we don't use the other property and class autocompleters, overwrite the default enabled completers
    yasqeInstance.defaults.autocompleters = ['customClassCompleter', 'customPropertyCompleter'];

    // var yasgui = this.state.yasgui;
    this.yasgui = yasqeInstance.fromTextArea(this.textareaNode, this.props.options);
    this.yasgui.on('change', this.yasguiValueChanged.bind(this));

....plus some more listening to events.

when I run then , the line with 'foo3' (post process token method) does execute three times, once for each of the uri's in the array; but it doesn't show on the text area. any clues?

please advise. thank you!

[LaurensRietveld]

I'm not sure, but you might want to take a look at where the suggestion element is drawn, and whether it is positioned/styled correctly (the suggestion div is absolutely positioned, so you might have issues caused by e.g. relative-positioned parent dom elements that cause the suggestions to render in the wrong location , or even under some other divs)

[jrenee42]

yep, that was the issue. another developer fixed it; thanks

On Mon, Apr 8, 2019 at 2:20 AM Laurens Rietveld notifications@github.com wrote:

I'm not sure, but you might want to take a look at where the suggestion element is drawn, and whether it is positioned/styled correctly (the suggestion div is absolutely positioned, so you might have issues caused by e.g. relative-positioned parent dom elements that cause the suggestions to render in the wrong location , or even under some other divs)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/OpenTriply/YASGUI.YASQE/issues/149#issuecomment-480698705, or mute the thread https://github.com/notifications/unsubscribe-auth/ADuGIHvaPILeCV9sZCiMvHQyH_7dmW-9ks5vet-MgaJpZM4cRBek .