带有子项的jQuery-ui自动完成

Question

I'm trying to implement autocomplete with extra info showing next to the suggestion. Whenever I hover over the item, it should show some extra details about items.

I tried adding extra div with autocomplete's dynamic positions, but no luck.

If anyone has any idea, I'm all ears!

Thanks

Answer 1

You can take a look here -> https://jqueryui.com/autocomplete/#custom-data on how to create a jQuery UI Autocomplete with extra info. (make sure to use their defined names "label, desc" etc).

After you create the jquery ui autocomplete with the info you need you can use jquery .hover() to display information however you need (in case you dont like the default example on UI page) . https://api.jquery.com/hover/

Edit: Just to make it easier for you to understand, instead of appending the item.desc while UI autocompletes you can user hover(item.desc)

I'm talking about this part of the code ->

.autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
    .appendTo( ul );