Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.

Jquery

Jquery Training

Jquery training blog

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 Continue Reading


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>
Please follow and like us:






About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts