Autocomplete not working

Developing Nodes
1

Hi folks,

I'm developing a new node where I need autocompletion in an input field which is located inside a popup dialog:

var formField = $('<form/>');
                        
// Create a dropdown, that represents the property name
var propertyNameField = $('<input/>', {class:"node-input-trace-name", type:"text", placeholder:"Property name", name:"propertyName"}).css({"width":"70%","margin-left":"5px","margin-right":"5px","z-index":"10000"}).appendTo(formField);

propertyNameField.autocomplete({
   source: function(req, add){
       var properties =["prop_A", "prop_B", "prop_C"];
       add($.ui.autocomplete.filter(properties || [] , req.term));
   }
});
                    
formField.dialog({
   modal: true,
   title: 'Enter a trace property name',
   zIndex: 10000,
   resizable: false,
   buttons: {
      'OK': function () {
         var name = $('input[name="propertyName"]').val();
         alert("Name = " + name);
         $(this).dialog('close');
      },
      'Cancel': function () {
         $(this).dialog('close');
      }
   }
});

I have written this code, similar like @Steve-Mcl has done it for our SVG node.
The dialog appears correctly, but no autocomplete options are displayed:

image

Normally a list of all corresponding options (in this case "prop_A", "prop_B" and "prop_C") should be displayed ...

I have no clue why it doesn't work, because I arrive in the "source" callback function (for every character that I enter):

image

Does anybody see what I'm doing wrong?

Thanks !!!
Bart

2

Been a while since I wrote that Bart but if memory serves, you might need some CSS styling. I.e its working - you just aint seeing it. Check the DOM.

Failing that what repo is it & I'll take a look.

EDIT

another thought...
try initialising the autocomplete in the dialog open event...

formField.dialog({
  ...
  open: function( event, ui ) {
    $( "#id" ).autocomplete({  source: properties });
  }
  ...
3

Hey Steve,

In the SVG node you had added this style:

<style>
    .ui-svg-ui-autocomplete {
        max-height: 100px;
        overflow-y: auto;
        overflow-x: hidden; /* prevent horizontal scrollbar */
        /*padding-right: 20px;/* add padding to account for vertical scrollbar */
    }
</style>

Which you had applied in every autocomplete field:

targetIdField.autocomplete({
   classes: {
      "ui-autocomplete": "ui-svg-ui-autocomplete", //add custom class for styling the dropdown
   },
   source: function(req, add){
      add($.ui.autocomplete.filter(node.nonAnimationIds || [] , req.term));
   }
});

So it is really needed to use custom css again :woozy_face:

4

I forget the reasons (might have been bad alignment or zero width or scrolling issues - i really cant remember Bart) - my memory is as bad as yours :stuck_out_tongue_winking_eye:

Not so much custom - just for style collisions in node-red editor (i think - super vague comment type thingy)

PS, did you see my EDIT in prev post?

1 Like
5

Thanks for reminding me about that! Had already forgotten about my bad memory :wink:

Nope, so good that you mention it.
That seems indeed to be the solution:

image

I have no clue how you figured out so quickly that this could be the solution...
I'm very impressed. Yes, very impressed !!

6

It was an educated guess based around having previous struggles with jQuery widget initialisation issues in dialogs :slight_smile:

Glad its sorted. :+1:

1 Like
7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.