JS autocomplete({})自动完成

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