jQueryUI之autocomplete

官方文档

示例一，本地数据

$("#menu-search").autocomplete({
    source: function (req, res)
    {
        var key = req.term;
        var result = [];
        if (key)
        {
            for (var i in programs)
            {
                if (programs[i].py && programs[i].py.indexOf(key.toUpperCase()) >= 0)
                {
                    result.push({value: programs[i].value,
                        label: programs[i].label,
                        el: programs[i].el});
                }
            }
        }
        res(result);
    },
    select: function (event, ui) {
        event.preventDefault();
        var $a = $(ui.item.el);
        $a.click();
        $a.parents('li.layui-nav-item:first').addClass('layui-nav-itemed');
        var scrollContainer = $a.parents('ul:first');
        $a.parents('ul:first').animate({scrollTop: "-=100000"}, 0);
        var scrollHeight = $a.offset().top + scrollContainer.scrollTop() - scrollContainer.offset().top;

        $a.parents('ul:first').animate({scrollTop: "+=" + (scrollHeight - 100)}, 500);
        $("#menu-search").val(ui.item.label);
        $("#menu-search").val(ui.item.value);

        // 增加访问频率统计
        addMenuView(ui.item);
    },
    focus: function (event, ui)
    {
        // 如果
    }
}).focus(function ()
{
    if (!$(this).val())
    {
        // term值为$$$
        $(this).autocomplete('search', '$$$');
        return false;
    }
    $(this).autocomplete('search', '');
    return false;
});

示例二，后台数据

$("#shipname_qycgSelect").autocomplete({source:"${ctx}/common/getQueickName?key=shipname",appendTo:"#shipnamePlanLab"});