jquery ui autocomplete

by dekkard

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
<label for="autocomplete">Select: </label>
<input id="autocomplete" class="color">

JavaScript

jQuery(document).ready(function() {    
function suggestions(input, element) { 
    var suggestions = [];
    if (element.hasClass("color")) {  
        var i = 0;
        while (i < 100) {
            suggestions.push("color" + i.toString()); // for testing purpose
            i++;
        }
    } else {
        var nr = 1;
        while (nr < 1025) {
            suggestions.push(nr.toString() + "px");
            nr = nr + 1;
        }
    }

  $(element).autocomplete({
    minLength: 1,
      
    source: function (request, response) {
      var counter = 0;
      var filteredArray = $.map(suggestions, function (item) {
        if (item.startsWith(request.term) && counter < 10) {
          counter = counter + 1;
          return item;
        } else {
          return null;
        }
      });
      response(filteredArray);
    },
      
    autoFocus: true
  });
} // suggestions
    
    suggestions(0, $("#autocomplete"));
});