aui-autocomplete [ 一 ] override

liferay aui-autocomplete

如: 数据项 resultFields : [ 'key', 'name', 'description' ],
要求下拉列表显示name和description, 选中后输入框仅显示name, submit时传递key到后台。

<form action="" method="post" name="<portlet:namespace />fm">  

    select:  

    <div id="demo"></div>  

    <BR>  

    key:  

    <input type='text' id='key' />  

    description:  

    <input type='text' id='description' />  

</form>  

<aui:script>  

AUI().ready(  

        'aui-autocomplete',  

        function(A) {  

            var states = [ [ 'AL', 'Alabama', 'The Heart of Dixie' ],  

                    [ 'AK', 'Alaska', 'The Land of the Midnight Sun' ],  

                    [ 'WI', 'Wisconsin', "America's Dairyland" ],  

                    [ 'WY', 'Wyoming', 'Like No Place on Earth' ] ];  

                      

            var autoComplete = new A.AutoComplete( {  

                contentBox: '#demo',  

                dataSource: states,  

                matchKey: 'name',  

                typeAhead: true,  

                autoHighlight: true,  

                forceSelection:true,  

                schema : {  

                    resultFields : [ 'key', 'name', 'description' ]  

                },  

                  

                on: {  

                        // 选择列表中某项时出发itemSelect事件  

                        'itemSelect': function(event) {  

                            /*
							小技巧,建议用chrome浏览器调试脚本
							想断点跟进来看this(autocomplete)对象都有哪些属性，打开下面的语句，控制面板错误处找到次行代码加断点。
							浏览器脚本调试中中很有趣，如果此句放在本function最后一行，很难通过控制面板错误处找到此行代码
							alert(this._elCurListItem.zzz());
							*/
							var key = this._elCurListItem._resultData.key;  

                            var name = this._elCurListItem._resultData.name;  

                            var description = this._elCurListItem._resultData.description;  

                              

                            //通过其他文本框得到需要的字段

                            $( "#key" ).val(key);  

							$( "#description" ).val(description); 

                            //选择列表项后输入框显示内容  

                            this.inputNode._node.value = name;  

                        },  

                        //离开列表未选中任何项或是输入值未找到任何匹配项时触发selectionEnforce事件  

                        //selectionEnforce 在forceSelection:true时才有效  

      

                        'selectionEnforce': function(event) {  

                            //未找到匹配项目，清空输入框  

                            this.inputNode._node.value = '';  

                            $( "#key" ).val('');  

							$( "#description" ).val(''); 

                        },  

                }  

            });  

              

            //override， 列表项显示内容， 如此处列表项显示username和 description  

            autoComplete.formatResult =  function(result, request, resultMatch) {  

                return (resultMatch  +  '<br>'+ result.description+ '<br>') || '' ;  

            };  

                      

            autoComplete.render();  

  

            //页面初始化时输入框显示值设定  

            autoComplete.inputNode._node.value = 'AAAAA';  

            $( "#key" ).val('');  

             $( "#description" ).val('');  

        });  

</aui:script>