everything works perfect .. but i can ONLY select a item if i click beside the text (outside the span) 

does anyone know how i can change the .live to have it run if clicked on the full div id=results

script:

2. $(document).ready(function() { 
3. $(".search").keyup(function() 
4. { 
5. var searchid = $(this).val();
6. var dataString = 'search='+ searchid;
7. if(searchid!='')
8. {
9. $.ajax({
10. type: "POST",
11. url: "<?=$Site['paths']['url']?>lib/ajax/locationinlinesearch.php?country=<?=$basecountry?>&bplace=" + document.getElementById("bplace").value,
12. data: dataString,
13. cache: false,
14. success: function(html)
15. {
16. $("#result").html(html).show();
17. }
18. });
19. }return false;    
20. });
21. 
    
22. jQuery("#result").live("click",function(e){ 
23. var $clicked = $(e.target);
24. var $name = $clicked.find('.name').html();
25. var decoded = $("<div/>").html($name).text();
26. $('#searchid').val(decoded);
27. jQuery("#result").fadeOut(); 
28. });
29. $('#searchid').click(function(){
30. jQuery("#result").fadeIn();
31. });
32. });

html (with ajax data published already)

2. <form method="post"><br>
3. <input class="search" id="searchid" style="font-size:1.0em; margin-top:0px; height:24px; border:1px solid #c2c2c2;" type="text" name="utown" size="32" autocomplete="off"><br><br> <input style="margin-left:0px;" id="tastesbutton" name="save" value="Save Changes" type="submit">
4. 
   
5. <div id="result" style="display: block;">
6. <!-- data provided via ajax -->
7. <div class="show" align="left"><span class="name">BANGKOK</span>&nbsp;<small>( Bangkok )</small><br></div>
8. <div class="show" align="left"><span class="name">Lat Krabang</span>&nbsp;<small>( Bangkok )</small><br></div>
9. <!-- END data provided via ajax -->
10. </div>
11. </form>