title: jQuery Autocomplete with custom select(): Hyperlink in custom HTML
body: <p>I have a jQuery autocomplete set up, for which I have a few special requirements. </p>
  
  <ul>
  <li>This is an autocomplete of "user profiles", where <em>each</em> autocomplete entry is rendered by the _renderItem as follows:</li>
  </ul>
  
  <hr>
  
  <p>Username: _firstname_lastname_ </p>
  
  <hr>
  
  <p>Phone number: _clickable_phone_number_ </p>
  
  <hr>
  
  <p>This part works fine.</p>
  
  <ul>
  <li>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)</li>
  </ul>
  
  <p>This works fine as well.</p>
  
  <ul>
  <li>Finally, the "_clickable_phone_number_" link should call another javascript snippet. Or a simply hyperlink</li>
  </ul>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I hope I'm clear. If not, I can explain further.</p>
  
  <p>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.</p>
  
  <p>EDIT: Since code snippets might make it clear, here's what I mean:</p>
  
  <p>My jQuery autocomplete has a select, like so:</p>
  
  <pre><code>$('#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) { .. }
  </code></pre>
  
  <p>HTML of each autocomplete rendered element:</p>
  
  <pre><code>&lt;div class=".ui-menu"&gt;
  &lt;div class="name"&gt;FirstName LastName&lt;/div&gt;
  &lt;div class="phone"&gt;12345&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have the live event set up like so:</p>
  
  <p><code>$('.phone').live("click", function() { callPhone($(this).html()); return false; }</code></p>