如何实现搜索框出现下拉提示？

最新推荐文章于 2018-02-01 16:08:00 发布
最新推荐文章于 2018-02-01 16:08:00 发布
阅读量1.8k 收藏 1
点赞数 1
文章标签： java javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_wuer/article/details/84746563
版权
第一种：
效果如下：
[img]http://dl2.iteye.com/upload/attachment/0112/6071/78a1c972-faed-3c68-bff2-2625b6508dfd.png[/img] 

<head>
    <title></title>
    <style type="text/css">
        #autoCompleteWp
        {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 100px auto;
            width: 300px;
            position: relative;
        }
        #datalist
        {
            position: absolute;
            left: 0;
            top: 56px;
            background: #f8f8f8;
            z-index: 2;
            border: 1px solid #FCC;
            padding: 15px;
            display: none;
        }
        #datalist li
        {
            line-height: 1.6;
            list-style: none;
            cursor: pointer;
        }
        .on
        {
            background: #06C;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="autoCompleteWp">
        请输入邮箱：<br />
        <input id="autoComplete" type="text" />
        <ul id="datalist">
        </ul>
    </div>
        <script type="text/javascript">
            var $ = function (id) {
                return "string" == typeof id ? document.getElementById(id) : id;
            };
            var Class = {
                create: function () {
                    return function () { this.initialize.apply(this, arguments); }
                }
            }
            function addEventHandler(oTarget, sEventType, fnHandler) {
                if (oTarget.addEventListener) {
                    oTarget.addEventListener(sEventType, fnHandler, false);
                } else if (oTarget.attachEvent) {
                    oTarget.attachEvent("on" + sEventType, fnHandler);
                } else {
                    oTarget["on" + sEventType] = fnHandler;
                }
            };
            function removeEventHandler(oTarget, sEventType, fnHandler) {
                if (oTarget.removeEventListener) {
                    oTarget.removeEventListener(sEventType, fnHandler, false);
                } else if (oTarget.detachEvent) {
                    oTarget.detachEvent("on" + sEventType, fnHandler);
                } else {
                    oTarget["on" + sEventType] = null;
                }
            }
            String.prototype.trim = function () {
                return this.replace(/^\s+|\s+$/g, '');
            }
            //自动完成类
            var autoComplete = Class.create();
            autoComplete.prototype = {

                initialize: function (obj, databox, data) {
                    _this = this;
                    this.input = $(obj);
                    this.data = data;
                    this.index = 0;
                    this.datalist = $(databox).getElementsByTagName('li');
                    addEventHandler(this.input, 'keyup', this.writting);
                },
                writting: function (e) {
                    var e = e || window.event;
                    var keyCode = e.keyCode || e.charCode;  //兼容ie firefox等事件

                    switch (keyCode) {

                        case 38: //上
                            _this.index--;
                            if (_this.index < 0) {
                                _this.index = $('datalist').getElementsByTagName('li').length - 1
                            }

                            if ($('datalist').getElementsByTagName('li').length > 0) {

                                for (var k = 0; k < $('datalist').getElementsByTagName('li').length; k++) {
                                    $('datalist').getElementsByTagName('li')[k].className = ''
                                }
                            }
                            $('datalist').getElementsByTagName('li')[_this.index].className = "on";
                            break;
                        case 40:
                            _this.index++;
                            if (_this.index > $('datalist').getElementsByTagName('li').length - 1) {
                                _this.index = 0;
                            }
                            if ($('datalist').getElementsByTagName('li').length > 0) {
                                for (var k = 0; k < $('datalist').getElementsByTagName('li').length; k++) {
                                    $('datalist').getElementsByTagName('li')[k].className = ''
                                }
                            }
                            $('datalist').getElementsByTagName('li')[_this.index].className = "on"
                            break;
                        //回车         
                        case 13:
                            _this.input.value = $('datalist').getElementsByTagName('li')[_this.index].innerHTML.replace(/<\/?strong>/gi, '')  //获取html，正则过滤标签，只取其值
                            $('datalist').style.display = 'none'
                            break;
                        default:
                            var temp = [];
                            var val = _this.input.value.trim();
                            if (val == '') {
                                $('datalist').style.display = 'none'
                                return;
                            }
                            //如果输入字符包含\会导致正则表达式出错，转换成\\即可  [ ] 等也需要转义
                            if (val.indexOf('\\') != -1) {
                                val = val.replace(/\\/g, '\\\\')
                            }
                            var reg = new RegExp('^(' + val + ')');
                            //利用正则把匹配到的数据 加入数组
                            for (var i = 0; i < _this.data.length; i++) {
                                //如果匹配到
                                if (reg.test(_this.data[i])) {
                                    thedata = _this.data[i].replace(reg, '<strong>$1</strong>'); //利用js正则式中replace中的占位符特性
                                    temp.push('<li title="' + i + '">' + thedata + '</li>')
                                }
                                else {
                                    $('datalist').style.display = 'none'
                                }
                            }
                            //如果匹配到数据
                            if (temp.length > 0) {
                                $('datalist').innerHTML = temp.join('');
                                $('datalist').style.display = 'block';
                                var li = $('datalist').getElementsByTagName('li');
                                li[0].className = "on";
                                _this.index = 0;
                                for (var i = 0; i < li.length; i++) {
                                    li[i].onmouseover = function () {
                                        for (var i = 0; i < li.length; i++) {
                                            li[i].className = '';
                                        }
                                        this.className = 'on';
                                        _this.index = this.getAttribute('title');
                                    }
                                    //鼠标点击
                                    li[i].onclick = function () {
                                        _this.input.value = this.innerHTML.replace(/<\/?strong>/gi, '')  //获取html，正则过滤标签，只取其值
                                        $('datalist').style.display = 'none'
                                    }
                                }
                            }
                            else {
                                $('datalist').innerHTML = '';
                            }
                            break;
                    }
                }
            }
            var data = ['yaofjaa@vip.qq.com', 'yaojaa008@163.com', 'yaojaa@yahoo.com', 'yaoj4aa@sohu.com.com', 'yaojaa@vipf.qq.com', 'yfaojaa@163.com', 'yaojfaa@sina.com', 'yaojaa@yahoo.com', 'yaojaa@sohu.com']
            var auto = new autoComplete('autoComplete', 'datalist', data)
    </script>
</body>
</html>

第二种：
效果如下：

[img]http://dl2.iteye.com/upload/attachment/0112/6075/eb41c084-0a74-3867-915d-9723b51dae37.png[/img] 


//显示搜索下拉选择项
    function showTips(searchInput) {
        var top = searchInput.offsetTop+32;
        var left = searchInput.offsetLeft;
        var width = searchInput.offsetWidth;
        var ulStringFormat = "<li onclick='selectOption(this)' onmouseover='javascript:this.style.backgroundColor=\"#A9A9A9\"' onmouseout='javascript:this.style.backgroundColor=\"#666666\"'  style='width:220px;height:25px;background-color: #666666;display:block;'><span style='float:left;text-indent:6px'>" + $("#searchvalue").val() + "</span><span id='{0}' style='float:right;padding-right:1px;fond-size:10px;'>{1}</span></li>";
        while (searchInput = searchInput.offsetParent) {
            top += searchInput.offsetTop;
            left += searchInput.offsetLeft;
        }
        if ($("#searchvalue").val().length > 0) {
            $("#searchTips").css({ "left": left + "px", "top": top + "px" }).show();
            $("#searchTips>ul").empty().append(kendo.format(ulStringFormat, "sFlightNo","航班号")).append(kendo.format(ulStringFormat, "sTailNo", "机号"));
        }
        else {
            searchInputBlur();
        }
    }
    function fillvalue(value) {
        alert($(value).find("span:first").html());
        searchInputBlur();
    }
    function searchInputBlur() {
        $("#searchTips").hide();
    }
    function selectOption(li) {
        $("#hidSearchOption").val(($(li).find("span:last").attr("id")));
        searchInputBlur();
    }
    //搜索
    function searchContent() {
        var url = "/Manager/DutyManager?BeginTime=" + getTodayBeginUTCTime() + "&EndTime=" + getTodayEndUTCTime()
        var option = $("#hidSearchOption").val();
        var value = $("#searchvalue").val().trim();
        switch (option) {
            case "sFlightNo":
                url += "&FlightNo=" + value;
                break;
            case "sTailNo":
                url += "&TailNo=" + value;
            default:
        }
        openWindow(url);
    }
L_wuer
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery模糊搜索框下拉选择代码
07-31
本文将详细解析"jQuery模糊搜索框下拉选择代码"这一主题，帮助开发者实现高效、友好的用户界面。 首先，模糊搜索是一种在用户输入时实时过滤和显示匹配结果的技术，它极大地提升了用户体验，特别是对于数据量大的...
常用的点击搜索框显示下拉框并实时刷新用户输入的内容
SuperCoooooder的博客
02-27 3397
//boot 输入框组 搜索 //下拉标题 输入关键字进行搜索
点击文本框搜索,出现在下拉列表中
weixin_34302798的博客
12-06 985
输入用户名发送请求到后台，将用户的custId返回回来，保存到form中，再提交。根据custId去搜寻 $("#custNameButton").click(function () { var custName=$("#custName"); var value = custName.val(); if(value.length==0)return; ...
搜索框模糊匹配下拉显示
热门推荐
疏影横窗忆旧游
10-17 2万+
搜索框模糊匹配下拉显示
JQ文本框点击出现下拉（模糊查询，搜索框等可套用）
删库跑路
01-31 2541
点击前 点击时 点击后 html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/css.css"/> <link rel="styles
Jquery带搜索框的下拉菜单
10-27
### Jquery带搜索框的下拉菜单实现方法 在网页开发中，为了提供更好的用户体验，开发者经常会在下拉菜单中加入搜索功能。这种方式不仅能够帮助用户快速定位到所需选项，还能减少滚动查找的时间，尤其当选项较多时...
vue实现百度搜索下拉提示功能实例
08-30
在本实例中，我们使用了 Vue.js 框架来实现搜索下拉提示功能。Vue.js 是一个渐进式、灵活的 JavaScript 框架，用于构建用户界面。它的核心是组件化、声明式渲染、响应式数据绑定等特性。 知识点2: Vue-resource 库...
Vue实现百度下拉提示搜索功能
08-30
在这个示例中，我们将探讨如何使用Vue来实现一个类似于百度的下拉提示搜索功能。这个功能允许用户在输入搜索关键词时，系统会根据输入内容动态显示相关建议，提高用户体验。 ### 1. 提示数据获取 在实现这个功能...
搜索框下拉提示
09-18
两项功能：一是搜索框提示，二是查询结果以异步传输技术返回，显示在DIV标签里。对了，网了说了，这个程序是电话查询的，你下载回去，改进改进，可做成搜索程序。这个程序，你用了，也会说好的，因为在网上，实在找...
Qt 控件 实现 QComboBox输入自动提示功能（仿Google搜索提示）
01-07
Qt 控件 实现 QComboBox输入自动提示功能（仿Google搜索提示）
易语言列表框首拼模糊查找源码.rar
03-20
易语言列表框首拼模糊查找源码.rar
js带搜索框的下拉列表
05-31
js带搜索框的下拉列表js带搜索框的下拉列表js带搜索框的下拉列表
jquery实现百度搜索关键字输入下拉框提示
04-12
jquery实现百度搜索关键字输入下拉框提示，非常有效果，本人亲测超级好用
Qt实现输入框,组合框提示,模糊查询,搜索关键字下拉提示功能
山水人间。
03-18 1万+
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { QWidget *NewWin = new QWidget; NewWin->resize(QSize(200,100)); //使输入框具有初始化提示语句 QLineEdit *MyEdit = new
实现搜索框既可以下拉框选择也可以输入搜索，输入的时候有自动填充提示
ddyy265201503的博客
02-01 2725
需求描述 项目中有很多列表页面，都有搜索功能，新增需求：所有的搜索框既可以输入搜索，也可以下拉框选择，且输入框输入的时候有相应的提示填充，如图所示： 代码实现 首先实现输入功能，查了很多资料，最终决定在搜索框覆盖一个Input框 <div class="select-editable"> <select id="qwindyear_id" class="...
仿百度搜索框自动下拉提示
weixin_34417183的博客
08-18 708
先上效果. 说明:这里重在前端实现,js部分,这里输入a 弹出"ajax" 和"ajax 教程"只是后台集合模拟的数据.通过ajax返回到前端的与a匹配的数据. 基础: html,JavaScript,ajax,css,servlet. 实现原理: 　　总体思路:输入框监测键盘动作,按压后,获取当前input 的value,异步发送到后台,匹配数据库数据,返回json结果集到前...
css中设置搜索框下拉多行提示信息
最新发布
06-07
要设置搜索框下拉多行提示信息，可以使用CSS的伪元素 ::after 或 ::before，结合 content 属性来实现。具体做法如下： 1. 给搜索框所在的容器（比如一个div）设置 position: relative; 2. 给搜索框（比如一个input...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值