Autocomplete

with no external library except for jquery

by rafmaz

HTML

<div id="container" class="container"></div>
<div id="pippo" class="container"></div>

CSS

.container{
  margin: auto;
}
.click-li {
  cursor: pointer;
}
.inp-container, #inp {
    margin-right: -10px;
    background-color: khaki;
    position: relative;
    width: auto;
    float: left;
    padding: 5px;
    padding-right: 25px;
    border-radius: 3px;
    border: 1px solid darkkhaki;
    color: #897f00;
}

#inp {
  padding:7px;
  float: none;
}

.remove-link {
  cursor:pointer;
  font-family: 'Verdana';
  font-weight:bold;
  color: #897f00;
  position: relative;
  left: -5px;
  width: auto;
  float: left;
  padding: 5px 0px;
}
#suggested-word{
  position: relative;
  float:clear;
}

JavaScript

function autocomplete(container) {
	var elements = createElements();
  var selected = [];
  var deleteLink='<div class="remove-link">x</div>';
	var suggestedWord = '<div id="suggested-word" ></div>';
	var inputSearch = '<input id="inp" type="text"/>';
  $('#'+container)
  	.append(inputSearch)
  	.append(suggestedWord);
  $('#'+container+' input#inp').keyup(function() {
    var inpVal = $(this).val();
		$('#'+container+' #suggested-word').html('<ul></ul>');
		if( inpVal.length > 2) {
    	var foundedSuggestion = false;
			for(i in elements) {
        var ele = elements[i];
        if(selected.indexOf(ele) == -1){
        	regex = new RegExp ('^' + inpVal, "i");
          if (regex.test(ele)){
          	foundedSuggestion = true;
            $('#'+container+' #suggested-word ul').append('<li class="click-li">'+ ele + "</li>");
          }
        }
    	}
      if (!foundedSuggestion) {
      	$('#'+container+' #suggested-word').html('<p>Nessun suggerimento trovato</p>');
      }
      $('#'+container+' .click-li').click(function(){
        selected.push($(this).html());
        $('#'+container+' input#inp').after('<div class="inp-container">' + $(this).html() + '</div>' + deleteLink);
        $('#'+container+' input#inp').val('');
        $('#'+container+' #suggested-word ul').html('');
        $('#'+container+' .remove-link').click(function(){
	        if(this.previousSibling != undefined) {
            removeEle = this.previousSibling.innerHTML;
            selected = selected.filter(function(i) {
              return i != removeEle;
            });
            $(this.previousSibling).remove();
            $(this).remove();
          }
        });
      });
    }
  });

  function createElements() {
  	var fruits = "Acerola Albicocca Alkekengi Amarena Ambarella Ananas Anguria Arancia Avocado Azzeruolo Babaco Banana Bergamotto Biriba Boysenberry Caco CamuCamu Cappero Carambola Carrube Castagna Cedro Chinotto Ciliegia Cirimoia Clementina Cocco Cocomero Corbezzolo...