Autocomplete

by Talsja

HTML

<form id="form1" name="form1"> <span>Autocomplete test : </span>

  <input type="text" id="autoCompleteTest"
  class="searchfield ui" />
</form>

CSS

body {
  margin:25px;
}
.txt {
  -moz-box-sizing: border-box;
  border-color: #DDDDDD;
  border-radius: 0 0 0 0;
  color: #454545;
  display: inline-block;
  font-size: 11px;
  height: 30px;
  margin-bottom: 0;
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  width:250px;
  padding: 4px 6px;
  line-height: 20px;
  border-radius:5px;
}
.searchfield {
  background: none repeat scroll 0 0 #E9F3FE;
  border: 1px solid #FFFFFF;
  border-radius: 3px 3px 3px 3px;
  box-shadow: 0 1px 0 #BAC2CB inset;
  color: #000000;
  float: left;
  font-size: 12px;
  height: 19px;
  line-height: 17px;
  margin-top: -5px;
  overflow: hidden;
  width: 300px;
  padding: 4px 6px;
}
.resultsContainer {
  border:1px solid red;
}

JavaScript

$(function () {
  var itemList = ["Alfa, 6, kavels", "Alpha, 6, kavels", "Bravo, 6, kavels", "Charlie, 6, kavels", "Delta, 6, kavels", "Echo, 6, kavels", "Foxtrot, 6, kavels", "Golf, 6, kavels", "Hotel, 6, kavels",
    "India, 6, kavels", "Juliett, 6, kavels", "Juliet, 6, kavels", "Kilo, 6, kavels", "Lima, 6, kavels", "Mike, 6, kavels", "November, 6, kavels", "Oscar, 6, kavels", "Papa, 6, kavels"];


  $("#form1 input#autoCompleteTest").autocomplete({
    minLength: 0,
    focus: function () { return false; },
    delay: 10,
    source: itemList,
      /*
    source: function (req, responseFn) {
      //Your ajax call here returning only responseFn Array having item.id and item.id
     
    },*/   
    select: function (event, ui) {
                this.value = ui.item.text;
             //   location.href = redirectUrl + '?SaleID=' + ui.item.value;
                return false;
    }
  })
 .data("autocomplete")
        ._renderItem = function (ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a><span class='airoplane'>" + (item[0] + (item[2] == "" ? "" : ", " + item[2]) + (item[1] == "" ? "" : " (" + item[1] + ")")).replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term)
                .replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<span class='highlight'>$1</span>") + "</span></a>")
                .appendTo(ul);
        };

 /**
$("#form1 input#autoCompleteTest").autocomplete({
   source: itemList    
 });
    */
});