Enabling down/up arrow functionality in bandpopup?

asked 2012-12-03 23:12:58 +0800

rickcr
704 ● 7

My goal is to do sort of a type ahead search type of thing like you see in chrome when typing in the URL bar and if you see something you like you can use the down arrow immediately.

I have my bandbox list filtered out properly handled by when onChanging command called to my view model. The issue is when the bandbox list pops up (which I have on auto) the up/down arrow doesn't work. I've even set a selected list item thinking that would help but it doesn't. I really hope someone could help because it's extremely frustrating since I know users typically expect to be able to start using the down arrow immediately when they see the drop down ( tried the search here but couldn't find anything.) here is my bandbox :

<bandbox id="bd" autodrop="true" value="@bind(vm.email)" style="width:340px;"
		 onChanging="@command('filterBackUsers',val=event.value)">
	<bandpopup>
		<vbox>
			<listbox model="@bind(vm.cutBackUsers)" selectedItem="@bind(vm.selectedUser)"
				width="340px" id="userList" onSelect="bd.close();">
				<template name="model" var="item">
					<listitem>
						<listcell label="@load(item.email)" /> 
					</listitem>
				</template>
			</listbox>
		</vbox>
	</bandpopup>
</bandbox>

delete flag offensive retag edit

5 Replies

Sort by » oldest newest

answered 2012-12-06 03:55:45 +0800

benbai
2228 ● 6
http://www.zkoss.org

updated 2012-12-06 03:56:04 +0800

Hi rickcr,

You can try override the bandbox's doKeyDown_ function then change focus and select item while key pressed as needed.

e.g.,

<zk xmlns:w="client">
	<bandbox autodrop="true">
		<attribute w:name="doKeyDown_"><![CDATA[
			function (evt) {
				this.$doKeyDown_(evt);
				var keyCode = evt.keyCode,
					selectListitem = function (idAttr, opt) {
						// get client widget by 
						// zk.Widget.$('$id') where the id is the id attribute or
						// zk.Widget.$('#uuid') where the uuid is the uuid assigned by ZK
						//
						// Note: the assigned uuid will be set to dom element's id attribute
						var listbox = zk.Widget.$('$' + idAttr),
							listitems = jq(listbox.$n('rows')).find('.z-listitem'),
							length = listitems.length,
							idx;
						listbox.focus();
						if (length > 0) {
							idx = opt == 'first'? 0 : length-1;
							zk.Widget.$('#'+listitems.id).setSelected(true);
						}
					};
				if (keyCode) {
					switch (keyCode) {
						case 38: // up
							selectListitem('lb', 'last');
							break;
						case 40: // down
							selectListitem('lb', 'first');
							break;
					}
				}
			}
		]]></attribute>
		<bandpopup>
			<listbox id="lb">
				<listitem>
					<listcell label="item one" ></listcell>
				</listitem>
				<listitem>
					<listcell label="item two" ></listcell>
				</listitem>
				<listitem>
					<listcell label="item three" ></listcell>
				</listitem>
			</listbox>
		</bandpopup>
	</bandbox>
</zk>

Regards,
Ben

link publish delete flag offensive edit

answered 2012-12-05 14:50:38 +0800

rickcr
704 ● 7

Anyone else run into this?

link publish delete flag offensive edit

answered 2012-12-11 16:11:08 +0800

rickcr
704 ● 7

@ benbai Thanks! sorry I haven't replied sooner. I'm going to give this a try for sure. (I'm on vacation so it'll probably be when I get back.) Thanks again for taking the time to produce this.