# Autocomplete not working

**URL:** <https://discourse.nodered.org/t/autocomplete-not-working/31674>\
**Category:** Developing Nodes\
**Created:** [17 August 2020 21:31 UTC](https://discourse.nodered.org/t/autocomplete-not-working/31674 "2020-08-17T21:31:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [17 August 2020 21:31 UTC](https://discourse.nodered.org/t/autocomplete-not-working/31674/1 "2020-08-17T21:31:46Z")

</div>

Hi folks,

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

```auto
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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/936278bd1f76647da7d81b967b3f327925f55077.png)

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d4f241fbfcf621790d922e315dceafba3f45ab78.png)

Does anybody see what I'm doing wrong?

Thanks !!!  
Bart

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [17 August 2020 22:02 UTC](https://discourse.nodered.org/t/autocomplete-not-working/31674/2 "2020-08-17T22:02:04Z")

</div>

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...

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

```

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [17 August 2020 22:07 UTC](https://discourse.nodered.org/t/autocomplete-not-working/31674/3 "2020-08-17T22:07:50Z")

</div>

Hey Steve,

In the SVG node you had added this [style](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/master/svg_graphics.html#L14):

```auto
<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](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/master/svg_graphics.html#L648) in every autocomplete field:

```auto
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 🥴

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [17 August 2020 22:09 UTC](https://discourse.nodered.org/t/autocomplete-not-working/31674/4 "2020-08-17T22:09:37Z")

</div>

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 😜

> [@BartButenaers](#):
>
> So it is really needed to use custom css again

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?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [17 August 2020 22:23 UTC](https://discourse.nodered.org/t/autocomplete-not-working/31674/5 "2020-08-17T22:23:04Z")

</div>

> [@Steve-Mcl](#):
>
> my memory is as bad as yours

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

> [@Steve-Mcl](#):
>
> PS, did you see my EDIT in prev post?

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/1/d14435844f803497b4d7d16a83a0580dd1bcceb2.png)

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [17 August 2020 22:26 UTC](https://discourse.nodered.org/t/autocomplete-not-working/31674/6 "2020-08-17T22:26:06Z")

</div>

> [@BartButenaers](#):
>
> I have no clue how you figured out so quickly that this could be the solution

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

Glad its sorted. 👍

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [31 August 2020 22:26 UTC](https://discourse.nodered.org/t/autocomplete-not-working/31674/7 "2020-08-31T22:26:07Z")

</div>

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