Using jQuery UI AutoComplete _renderItem with editor

Using jQuery UI AutoComplete _renderItem with editor

SarbastSarbast Posts: 85Questions: 0Answers: 0

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

Replies

  • allanallan Posts: 60,961Questions: 1Answers: 9,939 Site admin

    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

  • SarbastSarbast Posts: 85Questions: 0Answers: 0

    Thanks alot Allan

Sign In or Register to comment.