Setting a custom input field value on jquery-ui autocomplete

Question

I am trying to use jquery-ui's autocomplete to add a suffix of email domain (Eg. @gmail.com, @yahoo.com) to the existing value of a text field, when it is focused.

The following is my code:

$('body').on('focusin', '#id_email', function () {
    console.log("Focused")
    $('#id_email').autocomplete({
        minLength: 0,
        autoFocus: true,
        source: ["@gmail.com", "@yahoo.com", "@yahoo.co.in", "@hotmail.com", "@live.com"],
        select: function (event, ui) {
            var suffix = ui.item.value;
            existing_val = $("#id_email").val();
            new_val = existing_val + suffix;
            console.log(`Existing value"${existing_val} Suffix: ${suffix} New value:${new_val}`);
            $("#id_email").val(new_val);
        }
    }).focus(function () {
        $(this).autocomplete("search", "");
    })
});

The problem is that even though I have code for setting a new value for the text field on selecting one of the autocomplete options, the selected value replaces the field's existing value. Output in console:

Existing value"joelg@ Suffix: @gmail.com New value:joelg@@gmail.com

According to the output, the new value of the text field should be joelg@@gmail.com. However what actually happens is that even though the text field initially contained an initial value of joelg@, on focusing the field, the autocomplete menu is shown, and on selecting "@gmail.com", the existing value is replaced by "@gmail.com", instead of the input field getting a value of joelg@@gmail.com.

halfer · Accepted Answer · 2022-03-02 23:14:51Z

This may seem a bit different than you were trying. Basically, you want to avoid a search until the @ appears in the field and then build a number of email addresses at that time based on your list.

Take a look at this example.

$(function() {
  // Common Hosts Array
  var hosts = ["gmail.com", "yahoo.com", "yahoo.co.in", "hotmail.com", "live.com"];
  $("#email").autocomplete({
    minLength: 0,
    source: function(req, resp) {
      // Result Array
      var results = [];
      // Email Prefix (before @)
      var pre = req.term.slice(0, req.term.indexOf("@"));
      // Iterate each host, building a number of email addresses
      $.each(hosts, function(key, host) {
        results.push(pre + "@" + host);
      });
      resp(results);
    },
    search: function(e, ui) {
      // Check for instancwe of @ symbal and cancel search until found
      if ($(this).val().indexOf("@") <= 0) {
        return false;
      }
    }
  });
});

<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>

<div class="ui-widget">
  <label for="email">Email: </label>
  <input id="email">
</div>

We basically suppress the search until we see @ in the field. At that time, we take what the user has written and pair it to your host names.

Collectives™ on Stack Overflow

Setting a custom input field value on jquery-ui autocomplete

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related