Question

我正在使用jQuery自动完成。我想只在输入中包含2位以上的数字时才运行自动完成功能。以下是我的尝试：

    $(function() {
        $('#postcode').on('input', function() {
            var val = $(this).val();


            if(val.length > 2) {
                $( "#postcode" ).autocomplete({
                    source: function( request, response ) {
                        $.ajax({
                            url: "<?php echo base_url('welcome/read_postcode') ?>",
                            dataType: "jsonp",
                            data: {
                                q: request.term
                            },
                            success: function( data ) {
                                response( data );
                            }
                        });
                    }
                });
            }
        });
    });

代码运行正常，没有错误。但结果并不像预期的那样。此外，当我将alert();放入if()条件时，结果与预期的一样，但不是自动完成部分。有什么问题？

更新：使用此代码会发生什么，自动完成功能在输入第四个数字时运行，然后在每次击键时运行，直到该字段中的数字为零。

Answer 1

此处的正确方法是使用自动填充minLength设置：

$( "#postcode" ).autocomplete({
  minLength: 2
});

http://api.jqueryui.com/autocomplete/#option-minLength

您的初始代码的行为方式是因为调用autocomplete()实际上将事件处理程序附加到元素。你在这里做的是等到输入超过2个字符，然后附加一个新事件。随后的击键会触发自动完成，这就是为什么你会看到4个字符以及之后的结果。

这与以最小字符长度触发自动完成ajax请求不同 - 这是minLength参数的用途。希望有助于解释事情。

Answer 2

您可以使用minLength

执行此操作

minLength ：用户在激活自动填充功能之前必须输入的最小字符数。零对于只有几个项目的本地数据很有用。当有很多物品时，应该增加，其中一个角色可以匹配几千个物品。

$(function () {
    $("#postcode").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "<?php echo base_url('welcome/read_postcode') ?>",
                dataType: "jsonp",
                data: {
                    q: request.term
                },
                success: function (data) {
                    response(data);
                }
            });
        },
        minLength: 2
    });
});

Working example

如何在特定键击后启用iQuery自动完成功能？

2 个答案: