How to get jquery autocomplete to display only email addresses that begin with the typed query?

Question

Context

I'm using autocomplete function to search through 360 or more client email address. I want it to only suggest addresses that begin with the letters typed in by the user. For example, if the user types "thomas" the function should return suggestions that begin with "thomas" were as at the moment it shows matches which have the word Thomas anywere in their name.

Question

How can I modify either jquery to make sure that items that begin with whats being typed in are returned?

<div class="ui-widget">&nbsp;</div>

</fieldset>
</form>

<p>&nbsp;</p>
<meta charset="utf-8" />
<meta content="width=200, initial-scale=1" name="viewport" />
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script>
  $( function() {
var availableTags = [

"testemail@yahoo.co.uk, ",
"helloemail@gmail.co.uk, ",
    
    ];
    $( "#tags" ).autocomplete({
      source: availableTags

});
$( "#tags" ).autocomplete("option", "position",
               { my : "right-1 top+35", at: "right top" })

$( "#tags" ).autocomplete({
               minLength:4,   
               source: availableTags
            });

  } );
  </script>
<p><label for="tags">Emails:&nbsp;</label>
<input id="tags" maxlength="120" size="80" type="text" /></p>
<style>
input[type='text'] { font-size: 24px; }
</style>

<div class="ui-widget">&nbsp;</div>

Twisty · Answer 1 · 2020-07-09T18:34:17.087

You can define your own filtering within the Source option.

The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete, including JSONP. The callback gets two arguments:

A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".

A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

See more: https://api.jqueryui.com/autocomplete/#option-source

With your example, this could be something like the following.

$(function() {
  var myData = [
    "smith@matrix.net",
    "testemail@yahoo.co.uk",
    "helloemail@gmail.co.uk",
    "homer@simpsons.tv"
  ];
  $("#tags").autocomplete({
    minLength: 4,
    source: function(req, resp) {
      var results = [];
      $.each(myData, function(i, el) {
        if (el.indexOf(req.term) == 0) {
          results.push(el);
        }
      });
      resp(results);
    },
    position: {
      my: "right-1 top+35",
      at: "right top"
    }
  });
});

input[type='text'] {
  font-size: 24px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
  <label for="tags">Emails:</label>
  <input id="tags" maxlength="120" size="80" type="text" />
</p>

This uses the .indexOf() to identify the position. So if you want to see if the Term is at the beginning, the position would be 0.

You may want to adjust your minLength incase there is an email like jt@universal.com

How to get jquery autocomplete to display only email addresses that begin with the typed query?

1 Answers1