问在jquery-ui autocomplete上设置自定义输入字段值
EN

Stack Overflow用户

提问于 2019-09-05 12:04:20

回答 1查看 235关注 0票数 0

我正在尝试使用jquery-ui的自动完成功能来添加电子邮件域名的后缀(例如：@gmail.com，@yahoo.com)设置为文本字段的现有值。

以下是我的代码：

$('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", "");
    })
});

问题是，即使我有代码在选择自动完成选项之一时为文本字段设置新值，所选的值也会替换该字段的现有值。控制台输出：

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

根据输出，文本字段的新值应该为joelg@@gmail.com。然而，实际发生的情况是，即使文本字段最初包含初始值joelg@，但在聚焦该字段时，会显示自动完成菜单，并且在选择"@gmail.com“时，现有值将被"@gmail.com”替换，而不是获得joelg@@gmail.com值的输入字段。

jquery-ui

javascript

jquery

1元体验云点播

覆盖建站/短视频等热门场景，提供媒资管理、短视频 SDK、小程序插件和播放器云+端一体化能力，助您抓住视频风口

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-09-05 23:24:28

这看起来可能与您尝试的略有不同。基本上，您希望在字段中出现@之前避免搜索，然后根据您的列表构建多个电子邮件地址。

看一下这个例子。

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