current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 3 down vote favorite
1

Any suggestions for improving this? I'm hoping for some JavaScript object structure / code integrity type recommendations rather than style or CSS.

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: 1px solid #eee;
}
<input type="text" name="inputbox" id="inputbox">

share|improve this question
    
I wish I was getting as many useful answers as I am getting 3rd party edits to the formatting of my question. – Fo. Aug 12 '15 at 19:05
up vote 1 down vote

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.

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

share|improve this answer
1  
You, and the O.P. have mixed quote styles everywhere. You should pick either single or double quotes, and use the same style everywhere. – Ismael Miguel Aug 5 '15 at 14:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.