YAutocomplete

by johan polson

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<body>
    <div class="container">
        <br>
        <div class="center">
            <input id="login-name" type="text" placeholder="Country" class="form-control">
        </div>
        <br>
        <div class="center">var country_list = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &amp; Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia &amp; Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Cape Verde","Cayman Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kuwait","Kyrgyz Republic","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Mauritania","Mauritius","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Namibia","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New...

CSS

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/

/* 
    Created on : 2014-maj-25, 18:15:03
    Author     : Johan
*/
 .YAutocompleteContainer {
    display: none;
    height: auto;
    // width: 100%;
    position: absolute;
    margin-top: 10px;
    // padding-left: 2px;
    // padding-right: 2px;
}
.YAutocompleteDiv {
    height: auto;
    width: 100%;
    //padding-left: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    cursor: hand;
}
.YAutocompleteDiv:hover {
    background-color: bisque;
}
.YAutocompleteDiv:active {
    background-color: bisque;
}
.YAutocompleteDiv-activate {
    background-color: bisque;
}

JavaScript

(function ($) {

    $.fn.YAutocomplete = function (max, data, onSet, onExists, onGetJsonEX) {

        if (typeof onSet != 'undefined') {
            var onSet = onSet;
        } else {
            var onSet = null;
        }

        if (typeof onGetJsonEX != 'undefined') {
            var onGetJsonEX = onGetJsonEX;
        } else {
            var onGetJsonEX = null;
        }

        if (typeof onEX != 'undefined') {
            var onEX = onEX;
        } else {
            var onEX = null;
        }

        var indata = '<div class="form-control YAutocompleteContainer">';
        for (i = 0; i < max; i++) {
            indata += '<div id="" class="YAutocompleteDiv" ></div>';
        }
        indata += '</div>';
        $(indata).insertAfter(this);

        var textbox = $(this);

        $(window).resize(function () {
            $(container).width(textbox.width());
        });

        var container = $(this).next();
        var containerVisible = false;

        var searchOptionsArr = container.children().toArray();
        var searchOptionsArrLength = searchOptionsArr.length;
        var searchOptionsArrVisible = 0;
        var searchOptionsArrTextArr = [];
        var searchOptionsArrTextArrTemp = [];

        var isOver = false;

        for (var i = 0; i < searchOptionsArrLength; i++) {
            searchOptionsArrTextArr.push("");
            searchOptionsArrTextArrTemp.push("");

            $(searchOptionsArr[i]).click(function (e) {
                hide();
                $(textbox).val($(e.currentTarget).text());
                if (onSet != null) {
                    onSet(textbox);
                }
            }).mouseover(function () {
                isOver = true;
            }).mouseleave(function () {
                isOver = false;
            });
        }

        var searchDataArr = null;
        var searchDataArrLength = 0;

        var keyboardSelected = -1;

        function hide() {
            isOver = false;
            if...