How can I create a predicted text field using the below code?

JavaScript
1

I would like to create a predicted search with the following 2 items for example:

<input type="text" id="locationname" placeholder="Location"  required />
[{"value":"Aberdeen","country":"UK","product":"product1","identifier":"product1"},{"value":"Belfast","country":"UK","product":"product2","identifier":"product2"}]

Any ideas how I can do this?

Thanks!

2

pretty much any autocomplete library can do that.

3

Thanks for the reply. Could you give me an example using the above? I’m new to Javascript.

4

Examples and sample code can be easily found at https://jqueryui.com/autocomplete/

1 Like
5

Really? Your only advice on a JS board to someone asking how to do something is to pull another library? +1

This is actually not very difficult to do. You just need to add an event listener to that input element, so that each time a key is released, its current value gets checked against each of the options. If the option’s value property (up to the length of the input value) matches the input, add the option to a list. But here’s some code:

HTML

<input type="text" id="locationname" placeholder="Location"  required />
<ul id="suggestions"></ul>

JS

var options = [{
    "value": "Aberdeen",
    "country": "UK",
    "product": "product1",
    "identifier": "product1"
},
{
    "value": "Belfast",
    "country": "UK",
    "product": "product2",
    "identifier": "product2"
}];

// Function to check for suggestions
var autocomplete = function() {

        // The value of this input element, lowercased for convenience
    var input = this.value.toLowerCase(),

        // The element to place the suggestions into
        suggestions = document.getElementById('suggestions'),

        // A method to check the input against a single option
        checkSuggestions = function(option) {
            var element,
                text;

            // Check the lowercased current option value up to the length
            // of the input against the input
            if (option.value.toLowerCase().substring(0, input.length) === input) {

                // Create a list element, append the option value to it,
                // and finally add the element to the suggestion list
                element = document.createElement('li');
                text = document.createTextNode(option.value);
                element.appendChild(text);
                suggestions.appendChild(element);
            }
        };

    // Clear the content of the suggestion element
    suggestions.innerHTML = '';

    // If the input is not empty
    if (input) {

        // Check each of the options by calling checkSuggestions
        options.forEach(checkSuggestions);
    }

};

This can be tweaked quite a bit of course, but it should give you a starting point. If you get stuck, by all means ask but don’t just copy/paste some random snippets from the internet! :-D

6

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