Question

The autocomplete is outputting data in this format:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 1</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 2</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 3</a>
  </li>
</ul>

where do I change it to make it output it this way:

<ul class="pageitem">
  <li class="menu">
    <a class="name">item 1</a>
  </li>
  <li class="menu">
    <a class="name">item 2</a>
  </li>
  <li class="menu">
    <a class="name">item 3</a>
  </li>
</ul>

? I even tried to change the jquery script, but it’s too complex for me hehe, what do I need to change?

Answer 1

You should’t change the classes. jQuery UI uses the classes not only for styling but as selectors to make its widgets work so, if you change them, you no longer have a working plugin.

Depending on your needs, if you need to style the select at your own will, you should edit the css file provided by jQuery, or add classes of your own.

I repeat, don’t remove those classes…

If you want to add a span to the LIs, after the anchor, use the callback ‘open’, something like this:

$( ".selector" ).bind( "autocompleteopen", function(event, ui) {   
   $(this).find('li.ui-menu-item').each(function(index){
      var span = $('<span>');
      $(span).text('whatever you want');
      $(this).append($(span)); 
   });
});