how to filter my search input jquery autocomplete?

Question

I am coming to a problem where when user search for a value it shows all values rather then filtering my values. When I search for html , I want it to show only html as my value, not all my values. Please help. thank you.

Here is my code:

 $(function() { function log(message) { $("<div>").text(message).prependTo("#log"); $("#log").scrollTop(0); } $("#html").autocomplete({ source: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json", minLength: 1, select: function(event, ui) { log(ui.item ? "Selected: " + ui.item.value + " element " : "Nothing selected, input was " + this.value); } }); }); 

 .ui-autocomplete-loading { background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js" ></script> <div class="ui-widget"> <label for="html">HTML Elements: </label> <input id="html"> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> Result: <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div> 

Answer 1

It seems the source url does not respond to the filter. You can first make a call an get all the result in a variable and then set the autocomplete

let dataVariable;
$.ajax({
  method: "POST",
  url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json",",
  success:function(data){
   dataVariable=data;
 }
})
  .done(function( msg ) {
    $("#html").autocomplete({
    source: data,
    minLength: 1,
    select: function(event, ui) {

      log(ui.item ?
        "Selected: " + ui.item.value + " element " :
        "Nothing selected, input was " + this.value);
     }
   });
  });

Answer 2

 $(function() { function log(message) { $("<div>").text(message).prependTo("#log"); $("#log").scrollTop(0); } $.get("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json", function(data) { $("#html").autocomplete({ source: data, minLength: 1, select: function(event, ui) { log(ui.item ? "Selected: " + ui.item.value + " element " : "Nothing selected, input was " + this.value); } }); }) }); 

 .ui-autocomplete-loading { background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="ui-widget"> <label for="html">HTML Elements: </label> <input id="html"> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> Result: <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div>