How to Create Custom CSS, jQuery Autocomplete Plugin

Web developers often use autocomplete features in websites as a part of their work. Yet lot of good jquery autocomplete plugins are available but if we want to create our own plugin then what to do. Actually when jquery libraries are conflicting with each other specially when page is heavily loaded with jquery, we think about some simple autocomplete plugin. I feel creating an autocomplete plugin is very simple to prevent the need of including another large javascript library.

This is a fully javascript autocomplete plugin:
Lets start :

The CCS

		#joyautocomplete li{list-style-type:none;cursor: pointer;padding:5px}
		#joyautocomplete{
		box-shadow: 1px 1px 1px 1px #ccc;
  
    margin-top: 0px;
    padding: 0px;}
	#joyautocomplete li:hover{background:rgba(150, 176, 181, 0.24)}

The JS

var people = ['Steven', 'Sean', 'Stefan', 'Sam', 'Nathan'];

function matchPeople(input) {
  var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
  
  return people.filter(function(person) {
    if (person.match(reg)) {
      return person;
    }
  });
}


function changeInput(val) {
var inputwidth=document.getElementById('firm_name').offsetWidth;


 var autoCompleteResult = matchPeople(val);
 var list = '</pre>
<ul id="joyautocomplete">
 <li>' + autoCompleteResult.join('</li>
 <li>') + '</li>
</ul>
document.getElementById("result").innerHTML = list; document.getElementById('joyautocomplete').style.width=inputwidth; document.getElementById('joyautocomplete').onclick = function(event) { var target = getEventTarget(event); document.getElementById("firm_name").value = target.innerHTML; document.getElementById("joyautocomplete").style.display ='none' ; } } function getEventTarget(e) { e = e || window.event; return e.target || e.srcElement; }

<pre><input id="firm_name" style="width: 50%;" type="text" /></pre>
<div id="result"></div>