从自动完成中选择的事件

Posted 2023-02-24

【中文标题】从自动完成中选择的事件

【英文标题】：event on selecting from autocomplete

【发布时间】：2011-10-31 14:50:57

【问题描述】：

我有一个带有 keydown、单击和更改绑定到它的事件处理程序的文本框。当用户在此文本框中输入文本时，预览会同时更新。这很好用！

但是，当用户输入一些文本然后从自动完成中进行选择时，只有用户输入的文本在预览中可见。

仅当用户离开文本框或单击文本框或输入更多字符时才会更新。

是否有任何事件在用户从自动完成中选择的瞬间被触发？

注意：我没有使用 jquery 自动完成插件或任何东西，只是网络浏览器的自动完成。

【问题讨论】：

你能发布一些代码吗？是不是所有浏览器都会出现这个问题？

使用 Internet Explorer？也许这会让你感兴趣：***.com/questions/343192/…

【参考方案1】：

我刚刚遇到了同样的问题。单击建议的自动完成值时，浏览器（在本例中为 Chrome）根本不会触发任何事件。所以我使用 setInterval 每 100 毫秒左右轮询我的输入字段以查看它们的值是否发生了变化，如果是，则调用相应的函数。

这是我的代码（使用 jQuery）：

  var $form = $(".user");
  var $email = $("input[name='email']",$form);

  // start polling when the field is focused
  $email.focus(function()
    
      var $inp = $(this);
      $inp.data("val_old",$inp.val());
      $inp.data("val_poll",setInterval(function()
        
          if ($inp.data("val_old") != $inp.val())
          
            checkEmail(); // value has changed, take some action
            $inp.data("val_old",$inp.val());
          
        ,100));
    );

  // stop polling on blur
  $email.blur(function()
    
      clearInterval($(this).data("val_poll"));
      $(this).removeData("val_old val_poll");
    );

我曾经有一个 onkeypress 事件，但是有了这个 poller 就不再需要它了。

不是很漂亮，但很有效。适用于任何浏览器。

【参考方案2】：

<script type="text/javascript">
    function fillReview() 
        var email = document.getElementById("email");
        var review = document.getElementById("email-review");
        review.innerhtml = email.value;
    
</script>


<input type="text" id="email"  onkeyup="fillReview();" />
<span id="email-review"></span>