jQuery UI自动完成只弹出minLength:0

时间:2012-05-12 16:08:49

标签: jquery jquery-ui autocomplete jquery-ui-autocomplete

我在http://jqueryui.com/demos/autocomplete/使用了“自定义数据和显示”示例,并对其进行了简化,因此我可以将值和ID设置为:

$(function() {
    var prd = [
        { s: "hallo", v: "1" },
        { s: "hey", v: "2" },
        { s: "alloh", v: "3" }
    ];
    $("#product").autocomplete({
        source: prd,
        minLength: 0,
        focus: function(event, ui) {
            $("#product").val(ui.item.s);
            return false;
        },
        select: function(event, ui) {
            $("#product").val(ui.item.s);
            $("#productId").val(ui.item.v);
            return false;
        }
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.s + "</a>")
            .appendTo(ul);
    };
});

问题是没有minLength:0它永远不会弹出,并且minLength:0只会弹出一个空文本框(键入一个字符然后删除它)。

1 个答案:

答案 0 :(得分:2)

Jqueryui autocomplete使用“标签”和“价值”几乎是自动化的。将's'和'v'更改回'label'和'value',一切都会按预期工作:

  <script>
    $(function() {
        var prd = [
            { label: "hallo", value: "1" },
            { label: "hey", value: "2" },
            { label: "alloh", value: "3" }
        ];
        $("#product").autocomplete({
            source: prd,
            minLength: 0,
            focus: function(event, ui) {
                $("#product").val(ui.item.label);
                return false;
            },
            select: function(event, ui) {
                $("#product").val(ui.item.label);
                $("#productId").val(ui.item.value);
                return false;
            }
        }).data("autocomplete")._renderItem = function(ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.label + "</a>")
                .appendTo(ul);
        };
    });
  </script>