JS autocomplete({})自动完成

﹏ヽ暗。殇╰゛Y 2022-07-16 10:19 212阅读 0赞

Step 1:JS定义下拉元素的属性，有四个属性分别完成不同的功能

label是下拉列表元素显示的内容，value是点选后保存到输入框的值

// 定义下拉提示的变量
    // icon是下拉元素的图标
    // value是准备对象的标识
    // desc作为下拉元素的说明
    // label下拉元素的内容
    var projects = [
        {
            value: "jquery",
            label: "jQuery",
            desc: "the write less, do more, JavaScript library",
            icon: "jquery_32x32.png",
        },
        {
            value: "jquery-ui",
            label: "jQuery UI",
            desc: "the official user interface library for jQuery",
            icon: "jqueryui_32x32.png"
        },
        {
            value: "sizzlejs",
            label: "Sizzle JS",
            desc: "a pure-JavaScript CSS selector engine",
            icon: "sizzlejs_32x32.png"
        }
    ];

Step 2:定义一个ID=bad\_storage的HTML input元素

source是控制器返回的数据，也可以用上面直接定义的JS变量 ，如 source=projects；

event是表示当前事件SELECT，UI是下拉显示的元素，UI的属性是自定义的；

// 查询库位自动提示补全
    $("#bad_storage").focus(function () {
        if (!$(this).data('autocomplete') && !$(this).attr('readonly')) {
            $(this).autocomplete({
                
                autoFocus: true,// 默认选中第一项
                minLength: 0,
                autoFill: true,
                // source是返回的数据，用来构成下拉显示（后面添加参数）
                source: '<?php echo URL::base(true)?>orderreturn/get_storage?'+'ware_id='+ware_id+'&attribute=2',
                // event代表当前事件（这里是select），UI是下拉列表的每项
                select: function (event, ui) {
                    // 从建议列表中选中之后触发的事件
                    $(this).val(ui.item.name);
                    return false;
                }
            });
        }
    });

Step 3:后台控制器返回UI元素

id、label、name都是自定义的UI元素的属性

/**
     * 查询库位自动完成
     */
    public function action_get_storage(){
    
        $storages = array(1=>'A',2=>'B',3=>'C');// 查询到的参数
        $results = array();// 返回的结果集
        if($storages){
            foreach($storages as $key=>$storage){// 这里为UI显示的内容
                $results[] = array(
                    'id'    => $key,
                    'label' => $key.":".$storage,// 
                    'name'  => $storage
                );
            }
        }
        echo json_encode($results);
        exit;
    }

更多UI属性设置请访问[http://www.365mini.com/page/jqueryui-autocomplete-options.htm][http_www.365mini.com_page_jqueryui-autocomplete-options.htm]

[http_www.365mini.com_page_jqueryui-autocomplete-options.htm]: http://www.365mini.com/page/jqueryui-autocomplete-options.htm