Question

I have a jQuery autocomplete set up, for which I have a few special requirements.

• This is an autocomplete of “user profiles”, where each autocomplete entry is rendered by the _renderItem as follows:

---

Username: _firstname_lastname_

---

Phone number: _clickable_phone_number_

---

This part works fine.

• Upon selecting, immediately navigate to a different page. I’ve achieved this using a custom select which uses window.replace to go to a different page (that person’s profile)

This works fine as well.

• Finally, the “_clickable_phone_number_” link should call another javascript snippet. Or a simply hyperlink

The last part is where I’m having a problem. Since I immediately navigate to a different page upon select, I could not figure out how to “prevent” this action.

I am able to add a .live to the _clickable_phone_number_ and run some JS, but I’m not able to stop navigation to the profile page.

I hope I’m clear. If not, I can explain further.

Can anyone help me on how to achieve this? Basically, how do I hyperlink from within the custom rendered HTML, despite having a custom select() that navigates to a different page.

EDIT: Since code snippets might make it clear, here’s what I mean:

My jQuery autocomplete has a select, like so:

$('#input').autocomplete({ source: users, minLength: 3,
 select: function(event, ui) 
{ window.location.replace("/profile.asp?id=" + ui.item.value); }

}).data("autocomplete")._renderItem = function (ul, item) { .. }

HTML of each autocomplete rendered element:

<div class=".ui-menu">
<div class="name">FirstName LastName</div>
<div class="phone">12345</div>
</div>

I have the live event set up like so:

$('.phone').live("click", function() { callPhone($(this).html()); return false; }

Answer 1

have you tried using http://api.jquery.com/event.stopPropagation/

You’ll have to change up your code a bit, wire up your phone links in the open event instead of using live.

$('#input').autocomplete({ 
     source: users, 
     minLength: 3,
     select: function(event, ui){ 
         window.location.replace("/profile.asp?id=" + ui.item.value); 
     },
     open: function(event, ui){
          $('.phone').click(function(e) { 
              e.stopPropagation();
              callPhone($(this).html()); 
              return false; 
           });
     }
 }).data("autocomplete")._renderItem = function (ul, item) { .. }

The reason you can’t use .live anymore is because .live events arn’t fired until they have bubbled all the way up to the document, so you can’t stop anything.

I haven’t tested this, but it should work.