I have functioning jquery autocomplete search feature on my site where the user enters a partial name and it finds the matching full names from the database. The issue is that when there is a match, I've not been able to display the name matches using the following markup. It's working with the default autocomplete markup which is looking pretty bad. I need the results to show up in the li in the example below.
<div class="search_dropdown_wrapper">
<div id="search_arrow" class="dropdown_pointer search"></div>
<ul>
<li>
<a>Sam Cohen</a>
<p>Software Engineer</p>
</li>
</ul>
</div>
I'm having trouble wrapping the ul in the autocomplete with the above divs. I've tried playing with the code and I got it to partially display the results with the markup but the link feature got messed up and clicking on the name no longer populated the text box. Here is the autocomplete code I'm using..
if($('#search_name').length > 0){
$('#search_name').autocomplete({
minLength: 2,
source: '/profiles/jquery_auto_complete_name',
focus: function(event, ui) {
$('#search_name').val(ui.item.first_name + " " + ui.item.last_name);
return false;
},
select: function(event, ui) {
$("#receiver-list").val(ui.item.first_name + " " + ui.item.last_name);
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append("<a>" + item.first_name + " " + item.last_name + "</a>")
.appendTo( ul );
};
}
(credit: thanks to How to set-up jquery-ui autocomplete in Rails for a great example of auto-complete)
Thank you.
