Return to Answer

added 123 characters in body

Source Link

edited Aug 5, 2015 at 14:29

29.1k
11
87
188

Here are the changes that I made to your code. all I did was alter the CSS and add spaces before the opening braces in your JavaScript.

You should also stick you either single quotes or double quotes, it runs like this, but it is often confusing to read.

var list = [ 
    {name: 'Afghanistan', code: 'AF'}, 
    {name: 'Åland Islands', code: 'AX'}, 
    {name: 'Albania', code: 'AL'}, 
    {name: 'Algeria', code: 'DZ'}, 
    {name: 'American Samoa', code: 'AS'}, 
    {name: 'AndorrA', code: 'AD'}, 
    {name: 'Angola', code: 'AO'}, 
    {name: 'Anguilla', code: 'AI'}, 
    {name: 'Antarctica', code: 'AQ'}
]; 

function Autocomplete(selector) {

    this.list = list;

    this.box = document.getElementById(selector);

    this.dropdown = null;

    this.init = function() {
        this.box.addEventListener("keyup"'keyup', this.boxKeyUp);
        this.dropdown = document.createElement("ul"'ul');
        this.dropdown.setAttribute('class','drop');
        document.body.appendChild(this.dropdown);
        this.updateList();
    };

    this.updateList = function() {
        this.dropdown.innerHTML = "";'';
        var value = this.box.value;
        for(var i=0; i < this.list.length; i++) {
            var name = list[i].name.toLowerCase();
            var idx = name.indexOf(value);
            if(idx===0) {
                var item = document.createElement('li');
                item.appendChild(document.createTextNode(list[i].name));
                this.dropdown.appendChild(item);    
            }
        }     
    };

    this.boxKeyUp = function() {
        if(this.box.value===""value===''){
            this.dropdown.style.display = "none";'none';
            return true;
        }
        this.updateList();
        this.dropdown.style.display = "block";'block';
    }.bind(this);

    this.init();

    return this;
}
var ac = new Autocomplete("inputbox"'inputbox');

input {
    width: 200px;
}

input, .drop {
    margin: 0;
    padding: 0;
    padding: 6px;
    font-size: 16px;
    font-family: "helvetica neue", helvetica, sans-serif;
}

.drop {
    display: none;
    list-style-type: none;
    list-style-position: inside;
    border-style: none groove groove groove;
    border-color: silver;
    border-width:5px;
    width: 195px;
    background-color: lightgray;
}

<input type="text" name="inputbox" id="inputbox">

Here are the changes that I made to your code. all I did was alter the CSS and add spaces before the opening braces in your JavaScript

var list = [ 
    {name: 'Afghanistan', code: 'AF'}, 
    {name: 'Åland Islands', code: 'AX'}, 
    {name: 'Albania', code: 'AL'}, 
    {name: 'Algeria', code: 'DZ'}, 
    {name: 'American Samoa', code: 'AS'}, 
    {name: 'AndorrA', code: 'AD'}, 
    {name: 'Angola', code: 'AO'}, 
    {name: 'Anguilla', code: 'AI'}, 
    {name: 'Antarctica', code: 'AQ'}
]; 

function Autocomplete(selector) {

    this.list = list;

    this.box = document.getElementById(selector);

    this.dropdown = null;

    this.init = function() {
        this.box.addEventListener("keyup", this.boxKeyUp);
        this.dropdown = document.createElement("ul");
        this.dropdown.setAttribute('class','drop');
        document.body.appendChild(this.dropdown);
        this.updateList();
    };

    this.updateList = function() {
        this.dropdown.innerHTML = "";
        var value = this.box.value;
        for(var i=0; i < this.list.length; i++) {
            var name = list[i].name.toLowerCase();
            var idx = name.indexOf(value);
            if(idx===0) {
                var item = document.createElement('li');
                item.appendChild(document.createTextNode(list[i].name));
                this.dropdown.appendChild(item);    
            }
        }     
    };

    this.boxKeyUp = function() {
        if(this.box.value===""){
            this.dropdown.style.display = "none";
            return true;
        }
        this.updateList();
        this.dropdown.style.display = "block";
    }.bind(this);

    this.init();

    return this;
}
var ac = new Autocomplete("inputbox");

input {
    width: 200px;
}

input, .drop {
    margin: 0;
    padding: 0;
    padding: 6px;
    font-size: 16px;
    font-family: "helvetica neue", helvetica, sans-serif;
}

.drop {
    display: none;
    list-style-type: none;
    list-style-position: inside;
    border-style: none groove groove groove;
    border-color: silver;
    border-width:5px;
    width: 195px;
    background-color: lightgray;
}

<input type="text" name="inputbox" id="inputbox">

Here are the changes that I made to your code. all I did was alter the CSS and add spaces before the opening braces in your JavaScript.

You should also stick you either single quotes or double quotes, it runs like this, but it is often confusing to read.

var list = [ 
    {name: 'Afghanistan', code: 'AF'}, 
    {name: 'Åland Islands', code: 'AX'}, 
    {name: 'Albania', code: 'AL'}, 
    {name: 'Algeria', code: 'DZ'}, 
    {name: 'American Samoa', code: 'AS'}, 
    {name: 'AndorrA', code: 'AD'}, 
    {name: 'Angola', code: 'AO'}, 
    {name: 'Anguilla', code: 'AI'}, 
    {name: 'Antarctica', code: 'AQ'}
]; 

function Autocomplete(selector) {

    this.list = list;

    this.box = document.getElementById(selector);

    this.dropdown = null;

    this.init = function() {
        this.box.addEventListener('keyup', this.boxKeyUp);
        this.dropdown = document.createElement('ul');
        this.dropdown.setAttribute('class','drop');
        document.body.appendChild(this.dropdown);
        this.updateList();
    };

    this.updateList = function() {
        this.dropdown.innerHTML = '';
        var value = this.box.value;
        for(var i=0; i < this.list.length; i++) {
            var name = list[i].name.toLowerCase();
            var idx = name.indexOf(value);
            if(idx===0) {
                var item = document.createElement('li');
                item.appendChild(document.createTextNode(list[i].name));
                this.dropdown.appendChild(item);    
            }
        }     
    };

    this.boxKeyUp = function() {
        if(this.box.value===''){
            this.dropdown.style.display = 'none';
            return true;
        }
        this.updateList();
        this.dropdown.style.display = 'block';
    }.bind(this);

    this.init();

    return this;
}
var ac = new Autocomplete('inputbox');

input {
    width: 200px;
}

input, .drop {
    margin: 0;
    padding: 0;
    padding: 6px;
    font-size: 16px;
    font-family: "helvetica neue", helvetica, sans-serif;
}

.drop {
    display: none;
    list-style-type: none;
    list-style-position: inside;
    border-style: none groove groove groove;
    border-color: silver;
    border-width:5px;
    width: 195px;
    background-color: lightgray;
}

<input type="text" name="inputbox" id="inputbox">

Source Link

answered Aug 4, 2015 at 21:00

Malachi

29.1k
11
87
188

You should give your drop down some limitations, so that it isn't taking up all sorts of space that it shouldn't be, I started with adding a width of 200 pixels to it, but I suggest you change it to something that works for you.

I also added a background color, because I would want my dropdown to be different from the surrounding page so that I knew it was an extension of another element on the page, again you should alter this according to your needs, but don't leave it white on a white background.

I also removed the top border for the drop down. I am not much into the graphics of things. so mine doesn't look very pretty either, but you should make it so that the drop down looks like it is a drop down. or an Auto Suggest component

I assume that you are doing this just to learn JavaScript and not for an actual production site.

Just in the case that you are doing this for a production site I would recommend that you use jQuery and depending on the source of your suggestions AJAX as well.

AutoComplete Widget from jQuery-UI

in your JavaScript, give your Curly braces some space after the function declaration or the for loop declaration or the if declaration, you gave them space in your CSS, show the JavaScript braces the same courtesy.

Here are the changes that I made to your code. all I did was alter the CSS and add spaces before the opening braces in your JavaScript

var list = [ 
    {name: 'Afghanistan', code: 'AF'}, 
    {name: 'Åland Islands', code: 'AX'}, 
    {name: 'Albania', code: 'AL'}, 
    {name: 'Algeria', code: 'DZ'}, 
    {name: 'American Samoa', code: 'AS'}, 
    {name: 'AndorrA', code: 'AD'}, 
    {name: 'Angola', code: 'AO'}, 
    {name: 'Anguilla', code: 'AI'}, 
    {name: 'Antarctica', code: 'AQ'}
]; 

function Autocomplete(selector) {

    this.list = list;

    this.box = document.getElementById(selector);

    this.dropdown = null;

    this.init = function() {
        this.box.addEventListener("keyup", this.boxKeyUp);
        this.dropdown = document.createElement("ul");
        this.dropdown.setAttribute('class','drop');
        document.body.appendChild(this.dropdown);
        this.updateList();
    };

    this.updateList = function() {
        this.dropdown.innerHTML = "";
        var value = this.box.value;
        for(var i=0; i < this.list.length; i++) {
            var name = list[i].name.toLowerCase();
            var idx = name.indexOf(value);
            if(idx===0) {
                var item = document.createElement('li');
                item.appendChild(document.createTextNode(list[i].name));
                this.dropdown.appendChild(item);    
            }
        }     
    };

    this.boxKeyUp = function() {
        if(this.box.value===""){
            this.dropdown.style.display = "none";
            return true;
        }
        this.updateList();
        this.dropdown.style.display = "block";
    }.bind(this);

    this.init();

    return this;
}
var ac = new Autocomplete("inputbox");

input {
    width: 200px;
}

input, .drop {
    margin: 0;
    padding: 0;
    padding: 6px;
    font-size: 16px;
    font-family: "helvetica neue", helvetica, sans-serif;
}

.drop {
    display: none;
    list-style-type: none;
    list-style-position: inside;
    border-style: none groove groove groove;
    border-color: silver;
    border-width:5px;
    width: 195px;
    background-color: lightgray;
}

<input type="text" name="inputbox" id="inputbox">