Autocomplete的常见用法 Jquery-ui

简介：Autocomplete的功能是根据用户输入值进行搜索和过滤，效果可参考图1和图2。在实现此功能前需要jquery-ui.js和jquery-ui.css文件，点这里可下载。

1.1 用法一，效果图：

图（1）

 

1.2 代码如下：

<script src="..js/jquery-ui.js"></script>
<style src="..css/jquery-ui.css"></style>

<input type="text" id="menu_id" >

<script type="text/javascript">
    let source = [
        "yusheng",
        "jinrong",
        "mengxiaodong",
        "luchunlan"
    ]
    
    $("#menu_id").autocomplete({
        source:source
    })
</script>

2.1 用法二，效果图：

图（2）

2.2 代码如下：

<script src="..js/jquery-ui.js"></script>
<style src="..css/jquery-ui.css"></style>

<input type="text" id="menu_id" >

<script type="text/javascript">
    let r = [
        {
            "name": "yuesheng",
            "age": "28",
            "sex": "man"
        },
        {
            "name": "luchunlan",
            "age": "26",
            "sex": "female"
        },
        {
            "name": "jinrong",
            "age": "33",
            "sex": "man"
        },
        {
            "name": "xiaolin",
            "age": "30",
            "sex": "man"
        }
    ];
    $("#menu_id").autocomplete({
        source:function (request,response) {
            var result = [];
            var limit = 5;
            var term = request.term.toLowerCase();    // 获取输入的字符串
            $.each(r,function () {
                var item = this;
                if(term == '' || item.name.toLowerCase().indexOf(term) >= 0){ // 查询r中是否存在输入的字符串
                    result.push(item);
                    limit--;
                    if(limit == 0){
                        return false;
                    }
                }
            })
            response(result);
        },
        focus: function (event, ui) {    // 下拉框聚焦事件
            $('#menu_id').val(ui.item.name);
            return false;
        },
        select: function (event, ui) {    // 下拉框选中事件
            $('#menu_id').val(ui.item.name);
            return false;
        },
        search: function () {    //输入框变动事件
        }
    }).autocomplete("instance")._renderItem = function (ul, item) {
        // 填充下拉框数据
        return $("<li style='line-height: 20px;'>")
            .append($('<a>').append($('<b>').text(item.name)).append('<br>')
                .append($('<i>').text(item.age + ' | ' + item.sex)))
            .appendTo(ul);    
    }
</script>

完毕