Using jQuery UI AutoComplete _renderItem with editor

Sarbast

Hello,

I am using "jQuery UI AutoComplete" with editor everything work fine. I would like to show custom options "label with its details". Also, add some CSS to just details part. I searched about it and I found that I can do it via "_renderItem". I used it without editor correctly, I don't know how to apply it with editor.

Here is my code:

Client Side:

{
        label: "Maunfacturer:",
        name: "trade_names.manufacturer_id",
                type: "autoComplete",
                "opts": {
                    select: function(event, ui) {
                        event.preventDefault();
                        var m = ui.item.label.split(" ");
                        $(this).val(m[0]);  
                        console.log(ui);
                    },
                    focus: function(event, ui) {
                        event.preventDefault();
                        //$(".ui-menu-item").css("background-color","#dc3545");
                        var m = ui.item.label.split(" ");
                        $(this).val(m[0]); 
                    },
             }
        }

Server Side:

 Field::inst( 'trade_names.manufacturer_id' )
        ->validator( 'Validate::notEmpty' )
        ->options( Options::inst()
            ->table( 'manufacturers' )
            ->value( 'id' )
            ->label( array('name', 'country') )
            ->render( function ( $row ) {
                return $row['name'].' ('.$row['country'].')';
            } )
        ),
    
        Field::inst( 'manufacturers.name' )

Regards

allan

Personally I find jQuery UI auto complete very difficult to work with a different label from value. Which seems rather odd for such a library, but it looks like the jQuery UI development has stalled, so I'm not expecting it to change. Generally I use Select2 for this sort of thing.

However, as you have found, you can override the private _renderItem method:

editor
  .field('trade_names.manufacturer_id')
  .input()
  .autocomplete("instance")
  ._renderItem = function(ul, item) {
    // ...
  };

should do it.

Allan

Sarbast

Thanks alot Allan