如何让 jquery 自动完成以仅显示以键入查询开头的电子邮件地址？ [复制]

Question

上下文

我正在使用自动完成功能来搜索 360 或更多客户电子邮件地址。 我希望它只建议以用户输入的字母开头的地址。 例如，如果用户键入“thomas”，则该函数应返回以“thomas”开头的建议，因为此时它会显示名称中包含单词 Thomas anywere 的匹配项。

问题

如何修改任一 jquery 以确保返回以输入内容开头的项目？

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

Answer 1

您可以在 Source 选项中定义自己的过滤。

第三种变体，回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成，包括 JSONP。回调有两个参数：

• request 对象，具有单个 term 属性，它引用当前文本输入中的值。例如，如果用户在城市字段中输入 "new yo"，则自动完成项将等于 "new yo"。
• response 回调，它需要一个参数：建议给用户的数据。此数据应根据提供的术语进行过滤，并且可以采用上述任何简单本地数据的格式。在请求期间提供自定义源回调以处理错误时，这一点很重要。即使遇到错误，您也必须始终调用响应回调。这可确保小部件始终具有正确的状态。

查看更多：https://api.jqueryui.com/autocomplete/#option-source

对于您的示例，这可能类似于以下内容。

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

这使用.indexOf() 来识别位置。因此，如果您想查看 Term 是否在开头，则位置将是 0。

您可能需要调整您的minLength，以防有jt@universal.com 之类的电子邮件