搜索框的js实现

该博客介绍了如何使用JavaScript实现一个搜索框,当用户输入时,根据首字母提供智能提示。功能包括通过鼠标或键盘选择提示项,HTML数据来源于页面上的
  • 元素,回车功能可进一步定制。
  • 摘要由CSDN通过智能技术生成

    功能:在搜索框输入后能够根据首字来进行智能提示,可通过鼠标或者键盘来进行选择。

    只是模拟了下功能,数据是HTML里的<li>的内容,回车功能可替换

    HTML:

    <div class="wrap">
    		搜索:<input type="text" id="searchBox" class="search-box" />
    		<ul class="list-box">
    			<li>aac</li>
    			<li>avad</li>
    			<li>bjodf</li>
    			<li>ccc</li>
    			<li>cxz</li>
    			<li>bsad</li>
    			<li>carq</li>
    			<li>asd</li>
    		</ul>
    	</div>

    JS:

    /*
    *	搜索框功能
    *	数据是HTML里的li内容,可改从后台提取
    *	只测试了英文,且只判断了首字母,可改进
    *	回车的功能可替换成所需功能
    */
    
    var search = (function() { //采用自执行函数方式编写,避免造成全局污染和变量改写。
    	var doc = document, //存储document,减少全局查询次数
    		oSearchBox = doc.getElementById("searchBox"),
    		oUl
    • 0
      点赞
    • 5
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值