自动填充仅在页面加载或键入一个字母时运行一次但仅运行一次

时间:2012-10-10 08:21:44

标签: javascript jquery-ui jquery

http://jqueryui.com/autocomplete/#remote

      $(document).ready(function() {
        var Employees = function(request, response) {
            var value1 = document.getElementById('<%= txtEmployeeID.ClientID %>').value.split(" ");
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebService.asmx/GetEmployees",
                data: "{'keywords':'" + value1 + "'}",
                dataType: "json",
                async: true,
                success: function(data) {
                    response(data.d);
                },
                error: function(result) {
                    //alert("Error");
                }
            });
        }
        $('#<%= txtEmployeeID.ClientID %>').autocomplete({
            autoFocus: true, source: Employees
        });
    });

这是自动完成的代码,用于从数据库中获取值。

这会在输入每个字母时运行,然后过滤值。

我正在寻找自动完成,它将在开始时加载var Employee中的所有员工姓名,然后无需重试过滤自动完成将通过自动过滤作为功能来完成。

4 个答案:

答案 0 :(得分:2)

您可以获取员工,将结果存储在数组中,并将此数组作为option source提供。

答案 1 :(得分:1)

添加选项

select( event, ui ):function(){
$(this).disable();
} 

答案 2 :(得分:1)

Jquery AutoComplete函数始终从您作为参数传递给它的源进行过滤。如果将数组作为源传递,它总是在该数组中查找以进行过滤。

在您的情况下,源是一个函数,它会在您键入后立即获取新数组(已过滤的数组)。

所有你需要做的就是获取数组并存储在变量中,然后将该数组传递给自动完成插件。

你可以试试这个

$(document).ready(function() {
    var Employees = [];
    var value1 = document.getElementById('<%= txtEmployeeID.ClientID %>').value.split(" ");
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/GetEmployees",
            dataType: "json",
            async: true,
            success: function(data) {
                Employees = data.d; 
                $('#<%= txtEmployeeID.ClientID %>').autocomplete({
                    autoFocus: true, source: Employees
                });
            },
            error: function(result) {
                //alert("Error");
            }
        });

});

答案 3 :(得分:0)

有一个非常简单的演示,其中包含用于缓存响应和检查数据是否已被检索的源代码。使用此设置,您无需编写estra代码来提前检索值

http://jqueryui.com/autocomplete/#remote-with-cache

点击“VIew Source”