Autocomplete working on keyup but not click

Question

Like the title states, I'm using the same code for both functions like so

function autoComplete() {
    var jarName = $("#artifactId").val();
    var jarVersion = $("#version").val();
    url = "/xx/yy/zz/"+jarName+"/"+jarVersion+"";
    if (jarVersion===""){
        url = "/api/eetools/appdependencyfinder/"+jarName+"";
    }
    $.getJSON(url, function(completion) {
        $("#version").autocomplete({
            source: completion,
            minLength: 0
        })
        .focus(function() {
            $(this).autocomplete('search', $(this).val())
        });
    });
}

$("#version").on('keyup',autoComplete);
$("#version").on('click',autoComplete);

I modified my autocomplete from here

I wanted to on click, show all possible options.

And on click it seems to work for everyone in the question that I've linked with the function I've created. However when I click it doesn't work. IF I click, move off the screen to a new tab, then come back, it does work. or IF I click on the field, click off of it, then click on it again. Can you see a reason for this type of behavior?

It's almost like it takes 1 click to register, then on the second it works.

I tried deleting the on('click') function and test keyup, and noticed that now 'keyup' takes 2 keyups to work

After putting console.log(completion) inside the callback and console.log(“HERE”) inside the focus call I saw on the log that completion will print multiple times but not HERE, and if I switch off the screen then back on HERE will inject itself in between the completion prints.

Why do you need both `keyup` and `click`? It seems that `keyup` should do exactly what you need — Tony M, May 03 '19 at 21:43
because if they click on the field I want them to see all options, rather than start typing and see the options EDIT: If I take away click keyup needs two keys to work — sf8193, May 03 '19 at 21:44
Seems like the `focus` event in `autoComplete` doesn't quite fire as it should on `click`. I'd move up the on `focus` code or even just take out completely. It'd tricky to call `focus` within other events — Tony M, May 03 '19 at 21:58
@TonyM what do you mean by move it up? Is it possible that focus is async() called? — sf8193, May 03 '19 at 21:59
Problem lies within nesting the events. You can try something like this: (fyi - not tested): — Tony M, May 03 '19 at 22:22
and call it like: `autoComplete('click'); autoComplete('keyup')` — Tony M, May 03 '19 at 22:23

Tony M · Answer 1 · 2019-05-03T22:47:09.223

0

For the sake cleanliness I'll post the snippet as an answer. The idea is to move the original event inside, as the callback to autocomplete.

function autoComplete(event) {
    var jarName = $("#artifactId").val();
    var jarVersion = $("#version").val();
    url = "/xx/yy/zz/" + jarName + "/" + jarVersion + "";
    if (jarVersion === "") {
        url = "/api/eetools/appdependencyfinder/" + jarName + "";
    }
    $.getJSON(url, function(completion) {
        $("#version").autocomplete({
            source: completion,
            minLength: 0
        }).on(event, function() {
            $(this).autocomplete('search', $(this).val())
        });
    });
}
autoComplete('click'); 
autoComplete('keyup');

edited May 03 '19 at 22:47

answered May 03 '19 at 22:26

Tony M

741
4
16

yea unfortunately this doesn't work either. I have noticed that if I put console.log("HERE") inside the focus() function and console.log(completion) inside the parent, when I click completion prints out everytime and here doesn't. when I switch away from the screen, and back to it, "HERE" prints, but it injects itself INBETWEEN the completion prints, which is so strange – sf8193 May 03 '19 at 23:05

Autocomplete working on keyup but not click

1 Answers1