I want to bind the click event to the li elements in the xpages type-ahead

问题

I am using Tim Tripconys fancy type-ahead solution and it is working fine. http://www.timtripcony.com/blog.nsf/d6plinks/TTRY-7XD5P9

But I want it to behaive a bit differently, instead of filling the editbox with the value from the selected dropdown entry I want to attach a click event to the selected entry and redirect the user to the selected document.

this means that I need to override the current click event and send a hidden "unid" to my click event and do the redirect in javascript.

I have tried to add a class to the ul and li elements in my SSJS function so I can bind them to the click event. but that does not seem to be applied. and I am not sure how I should attach the click event as there is no eventhandler on the typeahead "ajax" control.

This is what I am trying to do

User enters characters in the editbox
the xpages Typeahead returns the results as a dropdown
the unid of each document returned need to be in hidden in the dropdown
clicking one of the dropdown entries will redirect to another page displaying the document the user clicked on based on the hidden unid.

btw. I know how to bind an event so I need no further explaination of this, but I need to know how to do it in relation to the type-ahead feature in xpages.

Below is a sample from the html elements that are generated from dropdown

<ul class="dijitReset dijitMenu dijitComboBoxMenu" dojoattachevent="onmousedown:_onMouseDown,onmouseup:_onMouseUp,onmouseover:_onMouseOver,onm>ouseout:_onMouseOut" style="top: 0px; overflow-x: hidden; overflow-y: hidden; width: 310px; visibility: visible; " id="home:_id1:_id19:_id29:search_popup" dir="" widgetid="home:_id1:_id19:_id29:search_popup">

<li class="dijitReset dijitMenuItem" role="option" id="home:_id1:_id19:_id29:search_popup1">
<table>
<tbody>
<tr>
<td><img src=""></td><td valign="top"><p><strong>Entry1</strong></p>
<p>
<span class="informal">TADN-8CWLTP<br>2012-03-01 09:29:07 CET<br>Test</span>
</p>
</td>
</tr>
</tbody>
</table>
</li>


<li class="dijitMenuItem dijitMenuNextButton" dojoattachpoint="nextButton" role="option" style="display: none; " id="home:_id1:_id19:_id29:search_popup_next">More choices</li>

</ul>

Thanks Thomas

回答1:

Look like I solved it myself, see below

First, I added a class and unid to the table in the dropdown

<li><table id=\"" + unid + "\" class=\"clicktable\">....</li></code>

Second, in the onclick event I bind the table to the click function using jquery live()

$(".clicktable").live("click", function(){
  alert($(this).attr("id"))
});

so when user click the dropdown entry the table is clicked instead of the li, and I can then easy write code to redirect the user as I know know which unid was clicked.

回答2:

Modify the response string to return "Entry1 | TADN-8CWLTP" back to the field.

Add an onChange event to the field which....
Passes the field value and name to the function
Parse the field value - return Entry1 to the user (for visual)
Take the note ID and location.href to the document you are looking for.

来源：https://stackoverflow.com/questions/9564172/i-want-to-bind-the-click-event-to-the-li-elements-in-the-xpages-type-ahead

标签

javascript

binding

xpages

typeahead