来自示例代码的jQuery自动完成功能不起作用

时间:2017-01-09 13:00:49

标签: javascript jquery jquery-ui-autocomplete

我在同一问题的任何其他问题中找不到答案。 我试图使用jQuery Autocomplete,但它根本不做任何事情:

$(function(){
    $("#pj-filter").change(function(){
        window.location.href = "?project_filter=" + $(this).val();
    });
    $("#user-filter").change(function(){
        window.location.href = "?project_filter=false&user_filter=" + $(this).val();
    });
    $("#add-task").click(function(e){
        Popup.loading();
        request("task_form", {}, function(response){
            Popup.finish();
            Popup.display(response);
            $("input#name").focus();
            $(".date-input").datepicker({ dateFormat: 'yy-mm-dd', firstDay: 1 });
            /*var projects = <?php echo json_encode($projects); ?>;
            $("#project").autocomplete({
                source: projects
            });*/
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
            $( "#project" ).autocomplete({
                source: availableTags
            });
            $("#save-task").click(function(){
                Popup.loading();
                request("save_task", {
                    name: $("input#name").val(),
                    status: $("select#status").val(),
                    description: $("textarea#description").val(),
                    due_date: $("input#due_date").val(),
                    type: $("select#type").val(),
                    safeID: $("input#safeID").val(),
                    project: $("input#project").val()
                }, function(response){
                    window.location.reload();
                });
            });
        });
    });
});

代码来自jQuerys主页上的示例。 奇怪的是,如果我在Chrome中查看代码:

<input type="text" id="project" maxlength="64" value="" 
       class="ui-autocomplete-input" autocomplete="off">

输入具有类ui-autocomplete-input,但自动完成功能仍无效。

我使用jQuery 3.1.1和jQuery-UI 1.12.1 jsfiddle中的相同代码工作正常: https://jsfiddle.net/yn1Lo5cm/

&#13;
&#13;
var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];
$("#project").autocomplete({
  source: availableTags
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="project" maxlength="64" value="" class="ui-autocomplete-input" autocomplete="off">
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

您已将自动填充设置为关闭尝试<input type="text" id="project" maxlength="64" value="" class="ui-autocomplete-input" autocomplete="on">

答案 1 :(得分:0)

我们可以非常肯定代码没有问题。这里有一点,自动填充是什么意思?您说的以下内容很有趣:

  

输入有类ui-autocomplete-input,但仍然是   自动填充不起作用。

为了使其有效,我们需要jqueryui css

我告诉这个,因为css的链接不在小提琴中。是这样的吗?

修改

此处需要注意的另一件事: 我相信自动完成HTML属性与浏览器自动完成以前使用的文本有关,与jQueryui功能无关。