OVXMwG

index.html

<label><p><b>Start typing a name in the input field below:</b></p></label>
<div id="code">
<form>
			<input type="text" id="auto">
		</form>
		<div id="results"></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//io.nmfzone.com/js/jquery-autocomplete.min.js"></script>
		

OVXMwG.markdown

OVXMwG ('-' * 6)

A Pen by Nabil Muhammad Firdaus on CodePen.

License.

script.js

$(function(){
    var availableData = [
    {
        value: "ActionScript"
    },
    {
        value: "AppleScript"
    },
    {
        value: "Asp"
    },
    {
        value: "BASIC"
    },
    {
        value: "C"
    },
    {
        value: "C++"
    },
    {
        value: "Clojure"
    },
    {
        value: "COBOL"
    },
    {
        value: "ColdFusion"
    },
    {
        value: "Erlang"
    },
    {
        value: "Fortran"
    },
    {
        value: "Groovy"
    },
    {
        value: "Haskell"
    },
    {
        value: "Java"
    },
    {
        value: "JavaScript"
    },
    {
        value: "Lisp"
    },
    {
        value: "Perl"
    },
    {
        value: "PHP"
    },
    {
        value: "Python"
    },
    {
        value: "Ruby"
    },
    {
        value: "Scala"
    },
    {
        value: "Scheme"
    }
    ];
    $('#auto').autocomplete({
        lookup: availableData,
        onSelect: function (datas) {
            var thehtml = datas.value;
            $('#results').html(thehtml);
        }
    });
});

style.css

#code, form, #results {
  float: left;
}
#resutls {
  color: #000;
  font-size: 17px;
  padding-left: 50px;
}