在jquery-ui自动完成功能上设置自定义输入字段值

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 .

Answer 1

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.

Hope that helps.