Node-RED
docs • api • ui• autocomplete
 

AutoComplete

Since 2.1.0

Adds auto-complete functionality to an <input> element.

Options

search

Methods

destroy

Events

Types

Options

search( value, [done])

Type: function

A function that is called when the input value changes that should return a list of possible completions.

The function can take one or two arguments:

  • value - the current value of the <input>.
  • done - an optional callback function that will be called with the completions.

If the function has two arguments, it must call done with the results rather than return them. This allows the function to do asynchronous work to generate the completions.

The returns list of completions must be an array of objects of the form:

   {
       value: "<string>", // The value to insert if selected
       label: "<string>"|DOMElement  // The label to display in the dropdown
   }

The label can be a DOMElement. This can be used to provide a customised display of the completion - for example, including more contextual information.

Methods

destroy( )

Remove auto-complete functionality from an <input>.

$(".input").autoComplete('destroy');

Examples

Auto-complete on plain <input>

<input type="text" id="node-input-example1">

// View the page source to see the full list of animals used in
// this example
let animals = ["Aardvark","Alligator","Alpaca","Anaconda","Ant","Antelope",
               "Carp","Cat","Caterpillar","Catfish","Cheetah","Chicken",
               "Deer","Dinosaur","Dog","Dolphin","Donkey","Dove" ];

$("#node-input-example1").autoComplete({
    search: function(val) {
        var matches = [];
        animals.forEach(v => {
            var i = v.toLowerCase().indexOf(val.toLowerCase());
            if (i > -1) {
                matches.push({
                    value: v,
                    label: v,
                    i: i
                })
            }
        });
        matches.sort(function(A,B){return A.i-B.i})
        return matches
    }
})

Pick an animal

<input type="text" id="node-input-example2">

// View the page source to see the full list of animals used in
// this example
let animals = ["Aardvark","Alligator","Alpaca","Anaconda","Ant","Antelope",
               "Carp","Cat","Caterpillar","Catfish","Cheetah","Chicken",
               "Deer","Dinosaur","Dog","Dolphin","Donkey","Dove" ];

$("#node-input-example2").autoComplete({
    search: function(val, done) {
        var matches = [];
        animals.forEach(v => {
            var i = v.toLowerCase().indexOf(val.toLowerCase());
            if (i > -1) {
                matches.push({
                    value: v,
                    label: v,
                    i: i
                })
            }
        });
        matches.sort(function(A,B){return A.i-B.i})
        // Simulate asynchronous work by using setTimout
        // to delay response by 1 second
        setTimeout(function() {
            done(matches);
        },1000)
    }
})

Pick an animal

Custom result labels

<input type="text" id="node-input-example2">

// View the page source to see the full list of animals used in
// this example
let animals = ["Aardvark","Alligator","Alpaca","Anaconda","Ant","Antelope",
               "Carp","Cat","Caterpillar","Catfish","Cheetah","Chicken",
               "Deer","Dinosaur","Dog","Dolphin","Donkey","Dove" ];

$("#node-input-example3").autoComplete({
    search: function(val) {
        var matches = [];
        animals.forEach(v => {
            var i = v.toLowerCase().indexOf(val.toLowerCase());
            if (i > -1) {
                var pre = v.substring(0,i);
                var matchedVal = v.substring(i,i+val.length);
                var post = v.substring(i+val.length)

                var el = $('<div/>',{style:"white-space:nowrap"});
                $('<span/>').text(pre).appendTo(el);
                $('<span/>',{style:"font-weight: bold; color:red"}).text(matchedVal).appendTo(el);
                $('<span/>').text(post).appendTo(el);

                matches.push({
                    value: v,
                    label: el,
                    i:i
                })
            }
        })
        matches.sort(function(A,B){return A.i-B.i})
        return matches
    }
})

Pick an animal

Node-RED: Low-code programming for event-driven applications.

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy