时间戳

首页 > 解决方案 > 自动完成在 keyup 上工作但不点击

javascript - 自动完成在 keyup 上工作但不点击

问题描述

就像标题状态一样，我对这两个函数使用相同的代码，就像这样

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

我从这里修改了我的自动完成

我想点击一下，显示所有可能的选项。

在点击时，它似乎对我与我创建的函数相关联的问题中的每个人都有效。但是，当我单击它不起作用。如果我单击，将屏幕移到新选项卡，然后返回，它确实有效。或者如果我单击该字段，请单击它，然后再次单击它。你能看出这种行为的原因吗？

这几乎就像只需单击 1 次即可注册，然后在第二次就可以使用。

我尝试删除 on('click') 函数并测试 keyup，并注意到现在 'keyup' 需要 2 个 keyup 才能工作

在将console.log(completion) 放入回调中并将console.log(“HERE”) 放入焦点调用后，我在日志上看到完成将打印多次但不是HERE，如果我关闭屏幕然后回到HERE将在完成打印之间注入自身。

标签： javascriptjqueryautocomplete

解决方案

为了清洁起见，我将发布该片段作为答案。这个想法是将原始事件移动到内部，作为对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');

推荐阅读