留言板

AutoCompleteList select unavailable value

Robert Meissner,修改在7 年前。

AutoCompleteList select unavailable value

Junior Member 帖子: 76 加入日期: 15-2-26 最近的帖子
Hello,
i have this code, which is working fine:

<aui:input name="<%=columnName %>" type="hidden" value="<%=filter %>" />

			<div id="<portlet:namespace />autocomplete"></div>

			<liferay-portlet:resourceurl var="debitorResourceURL" id="<%=columnName %>" />

			<aui:script use="tf-portlet,aui-io-request-deprecated,aui-textboxlist-deprecated">
			AUI().ready(function(A) {
			    var json;
			    var textboxlist = null;
			    var renderNewTextboxlist = function (event) {
					textboxlist= new A.TextboxList({
					    boundingBox: '#<portlet:namespace />autocomplete',
					    dataSource: json,
					    matchKey: 'key',
					    on: {
					        itemSelect : function(event) {
					            var result = event.details[1].key;
					            var inhalt = A.one('#<portlet:namespace />&lt;%=columnName%&gt;').val();
					            if (inhalt) {
					                A.one('#<portlet:namespace />&lt;%=columnName%&gt;').val(inhalt + ";" + result );    
					            } else {
					                A.one('#<portlet:namespace />&lt;%=columnName%&gt;').val(result);
					            }
					        }
					    },
					    schema: {
					        resultFields: ['key']
						},
						typeAhead: true,
						width: 200
					}).render();
				    A.each(A.one('#<portlet:namespace />&lt;%=columnName%&gt;').val().split(';'), textboxlist.add, textboxlist);
			    };
			    
			    var updateHiddenInput = function (event) {
			        var newString = A.one('#<portlet:namespace />&lt;%=columnName%&gt;').val().replace(event.attrName,"").replace(";;",";");
			        if (newString.slice(0,1) == ";") {
			            newString = newString.substr(1,newString.length);
			        }
			        if (newString.slice(newString.length-1,newString.length) == ";") {
			            newString = newString.substr(0,newString.length-1);
			        }
			        A.one('#<portlet:namespace />&lt;%=columnName%&gt;').val(newString);
			    };

			    A.io.request('&lt;%=debitorResourceURL%&gt;', {
			        dataType: 'json',
			        method: 'GET',
			        on: {
			            success: function() {
			                json = this.get('responseData');
			                renderNewTextboxlist();
			                textboxlist.entries.after('remove', updateHiddenInput);
						}
					}
			    });
			});
			</aui:script>


Additionally, i want to be able to select a value that is not in my dataSource, (e.g. "Al*", a placeholder for another query). How to do it? Is it possible at all with AutoCompleteList? What is the name of the event?

Best regards,
Rome
Robert Meissner,修改在7 年前。

RE: AutoCompleteList select unavailable value

Junior Member 帖子: 76 加入日期: 15-2-26 最近的帖子
i found, that i can use

new A.TextboxList({
					    allowAnyEntry: true,


but it does not react to itemSelect, so i am still figuring out, what event it is, that i have to use in this case.