JQuery 实现 input 自动完成

这里说的自动完成包含两方面的功能:
1、当input输入框成为焦点的时候,显示一个列表列出所有可能的选择;
2、当input每输入一些字符,自动搜索出所有以那些字符开头的可能输入,并列表显示。

原理:
给输入框的input标签中增加 onfocus、onkeyup 和 onblur 事件,分别邦定三个不同的函数,分别具有显示所有可选列表、根据输入框的值搜索的结果列表和隐藏列表的功能。

解析:
选择 onfocus 而不是 onclick ,因为不是只有通过后者才能得到输入框的焦点。
选择 onkeyup 而不是 onchange 的原因是,后者只有当输入框内容更改并失去焦点的时候才触发。
然而,每次 onkeyup 时都读取列表不好,因为中文输入一个字要按好多个键。所以每次 onkeyup 都应判断输入框的内容是否已经改变(IE 可用 IE Only 的一个事件来替代 onkeyup )。
所以,用一个长 ID 的 div 来存储输入框更改之前的 value 值。这个 div 完全可以用全局变量代替。
最后,因为 AJAX 读取 JSON 有延迟,所以在第一个<ul> 和 <li> 之间加入提示文字,读取到 <li> 的内容后会自不显示(IE8)。

本代码不包含列表项目的点击效果,较为基础,只是一个练习而已,如下。

<head>
<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript">
    function showPeopleList(o) {
        if ($(".ajs-layer:last").css("display") == "none") {
            $(".ajs-layer:first").css("display", "inline");
            $(".ajs-layer:first").css("position", "absolute");
            $(".ajs-layer:first").css("left", $(o).offset().left);
            $(".ajs-layer:first").css("top", $(o).offset().top + $(o).height());
        }       
    }
    function searchPeopleList(o) {
        $(".ajs-layer:first").css("display", "none");
        $(".ajs-layer:last").css("display", "block");
        $(".ajs-layer:last").css("position", "absolute");
        $(".ajs-layer:last").css("left", $(o).offset().left);
        $(".ajs-layer:last").css("top", $(o).offset().top + $(o).height());
    }
    function hideAllPeopleList() {
        $(".ajs-layer").css("display", "none");
    }
</script>
</head>
<body>
<div class="shadow-container2">
                           <div class="title">
                             <div class="name">系统选人</div>
                                <div class="oper"><a href="#"></a></div>
                           </div>
  <div class="contain">
    <table width="100%">
      <tr>
        <td align="right">计划负责人</td>
        <td><input name="textfield" type="text" class="inputBorderCursor required" onfocus="showPeopleList(this);" onkeyup="searchPeopleList(this);" onblur="hideAllPeopleList();"  style="width:250px"/></td>
      </tr>
    </table>
  </div>
  <div class="bottom">
        <div class="btn">
          <input type="button" value="保存并关闭" />
        </div>
  </div>         
</div>
<div class="ajs-layer" style="width: 200px; display:none;">
                        <div class="aui-list" style="width: auto; display: block; white-space: nowrap; height:100px; overflow:auto; overflow-x:hidden;">
                           <ul class="aui-list-section">
                             <li><a class="aui-list-item-link" href="#">项目人员A(专业)</a></li>
                             <li><a class="aui-list-item-link" href="#">项目人员A(专业)</a></li>
                             <li><a class="aui-list-item-link" href="#">项目人员A(专业)</a></li>
                             <li><a class="aui-list-item-link" href="#">项目人员A(专业)</a></li>
                           </ul>
                        </div>
                        <div style="background-color:#eff5fb; text-align:center; padding:5px 0;"><a href="#" class="blue">从系统中选择人员</a></div>
  </div>
<div class="ajs-layer" style="width: 200px; display:none;">
<div class="aui-list" style="width: auto; display: block; white-space: nowrap; height:100px; overflow:auto; overflow-x:hidden;">
                           <ul class="aui-list-section">
                             <li><a class="aui-list-item-link" href="#"><font color="#FF0000"></font></a></li>
                             <li><a class="aui-list-item-link" href="#"><font color="#FF0000"></font></a></li>
                             <li><a class="aui-list-item-link" href="#"><font color="#FF0000"></font></a></li>
                             <li><a class="aui
-list-item-link" href="#"><font color="#FF0000"></font></a></li>
                           </ul>
                        </div>
                        <div style="background-color:#eff5fb; text-align:center; padding:5px 0;"><a href="#" class="blue">从系统中选择人员</a></div>
  </div>
</body>

发布者

袁 源

我是袁源,职业是前端开发 关注我的新浪微博

《JQuery 实现 input 自动完成》有2个想法

    1. 你说修改浏览器自带的自动完成?只能禁用吧。为什么要这样修改呢?禁用后自己实现呗。ps:这个内容是很早以前的了,建议去 github 找你想要的代码

发表评论

电子邮件地址不会被公开。 必填项已用*标注