JQuery自动填充 - 限制选择数量

时间:2018-01-19 15:09:18

标签: javascript jquery html autocomplete

我正在使用JQUERY自动填充功能,并尝试将选项数限制为10。我不确定如何限制用户看到的内容。任何人都可以帮忙吗?

下拉列表最多只能显示10个名字......我不知道如何实现这一目标。在输入1个字符后激活自动完成功能。

$(function() {


     $( "#search" ).autocomplete({
        source:[
               {"label":"ALEX - A111","movie_id":"A111","name":"ALEX"},
               {"label":"AL - A112","movie_id":"A112","name":"AL"},
               {"label":"JON - A113","movie_id":"A113","name":"JON"},
               {"label":"JOE - A114","movie_id":"A114","name":"JOE"},
               {"label":"TOM - A115","movie_id":"A115","name":"TOM"},
               {"label":"TED - A116","movie_id":"A116","name":"TED"},
               {"label":"TESS - A117","movie_id":"A117","name":"TESS"},
               {"label":"SAM - A118","movie_id":"A118","name":"SAM"},
               {"label":"RON - A119","movie_id":"A119","name":"RON"},
               {"label":"RICK - A120","movie_id":"A120","name":"RICK"},
               {"label":"CAM - A121","movie_id":"A121","name":"CAM"},
               {"label":"LUCY - A122","movie_id":"A122","name":"LUCY"},
               {"label":"TIM - A123","movie_id":"A123","name":"TIM"},
               {"label":"ERIC - A124","movie_id":"A124","name":"ERIC"},
               {"label":"KERRY - A125","movie_id":"A125","name":"KERRY"},
               {"label":"AMY - A126","movie_id":"A126","name":"AMY"},
               {"label":"GREG - A127","movie_id":"A127","name":"GREG"},
               {"label":"MIKE - A128","movie_id":"A128","name":"MIKE"},
               {"label":"BILL - A129","movie_id":"A129","name":"BILL"},
               {"label":"BOB - A130","movie_id":"A130","name":"BOB"}
               ],


        minLength: 1, //search after one characters


        focus: function(event, ui) {
            $("#search").val(ui.item.label);
            return false;
        },

        change: function(event, ui) {
                if (!ui.item) {
                     alert("You must select a 'Member' from the drop-down list.");
                     $("#search").val('');
                     $("#search").focus();
                     $("#name").val('');
                return false;
                }
         },

        select: function( event, ui ) {
                    event.preventDefault();
                    $('#search').val(ui.item.label);
                    this.value = ui.item.label;

                    $('#name').val(ui.item.movie_id);

        }
    });
});

0 个答案:

没有答案
相关问题