输入框智能提示（二）

摘自：http://www.zhaochao.top/article/105，更多开发技术请访问 https://www.zhaochao.top

使用ul和li实现的智能提示框，简单优化了一下js，效果较select好一些，而且避免了select的自身缺陷。

效果：

体验地址：http://www.zhaochao.top/iBlog/articles.html

html代码：

    <div class="topBox">    
        <div class="searchBox">
            <input class="searchInput" id="searchInput" onkeydown="searchUpDown(event)" 
                placeholder="请输入检索内容..." maxlength="32"/>
            <img class="searchIcon" id="searchBtn" src="../iBlog/images/icons/search_icon.png"/>
        </div>
        <ul class="searchNotice">
            <li>平淡如水</li>
            <li>我在岁月中找到他</li>
            <li>将一生交付</li>
            <li>将一生交付333</li>
        </ul>
        <div class="ad">
            <img src="../upload/meinv.jpg"/>
        </div>
    </div>

 

css代码：

 

    .topBox {    
        width: 100%;
        position: relative;
    }
    .searchBox {
        width: 95%;
        height: 50px;
        line-height: 50px;
        padding: 15px 0 10px 0;
        margin: 0px auto;
        background: rgba(10,10,10,0.3);
        border-radius: 3px;
    }
    .searchInput {
        float: left;
        width: 70%;
        height: 25px;
        margin-left: 35px;
        border: 1px solid #999;
        border-radius: 3px;
        padding: 5px;
        text-indent: 5px;
        background: rgba(153,153,153,.2);
    }
    .searchIcon {
        float: right;
        height: 35px;
        margin-right: 40px;
        cursor: pointer;
        background: rgba(150,150,150,0.4);
        border: 1px solid #999;
        border-radius: 3px;
    }
    .searchNotice {
        width: 69%;
        display: none;
        position: absolute;
        z-index: 1001;
        top: 53px;
        left: 46px;
        background: rgba(50,50,50,.5);
        border-radius: 3px;
        border: 1px solid #444;
    }
    .searchNotice li {
        list-style-type: none;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        text-indent: 10px;
        cursor: pointer;
        overflow-y: hidden;
    }
    .searchNotice li:hover {
        background: rgba(80,180,80,.7);
    }
    .searchNotice .choose {
        background: rgba(80,180,80,.7);
    }

 

js代码：

    var data = [    
               {'data': '1122334'},
           ];
    var ckList;
    $(function () {
       data = searchData(data, '', true);
       var f = false;
       $('.searchNotice').hover(function () {
          f = true;
       }, function () {
          f = false;
       });
    
       $('#searchInput').blur(function () {
          if (!f) {
             $('.searchNotice').hide();
          }
       });
    });
    
    var tempCode = -1;
    
    function searchUpDown(e) {
        var key = window.event ? e.keyCode : e.which;
        tempCode = key;
        if (key == 40) {//down
        if ($('.searchNotice li.choose').length > 0 && $('.searchNotice li.choose').next().length > 0) {
                $('.searchNotice li.choose').next().addClass('choose').siblings().removeClass('choose');
          } else {
                $('.searchNotice li:first-child').addClass('choose').siblings().removeClass('choose');
            }
        } else if (key == 38) {//up
        if ($('.searchNotice li.choose').length > 0 && $('.searchNotice li.choose').prev().length > 0) {
                $('.searchNotice li.choose').prev().addClass('choose').siblings().removeClass('choose');
            } else {
                $('.searchNotice li:last-child').addClass('choose').siblings().removeClass('choose');
            }
        } else if (key == 13) {//enter
          if ($('.searchNotice li.choose').length > 0) {
             $('#searchInput').val($('.searchNotice li.choose').text());
          } else {
                $('#searchBtn')[0].click();
          }
       }
    }
    
    var tempData = null;
    
    /**
     * 搜索框智能提示
     * @returns
     */
    function notice () {
       var max = 10;
       var res = {
          'list': []
       };
       var info = $('#searchInput').val().trim();
       if (info != null || info != "") {
          if (info.length >= 1) {
                info = info.toLowerCase();
                data = searchData(data, info, false);
             if (tempData == data && $('.searchNotice').css('display') == 'block' 
                                 && (tempCode == 38 || tempCode == 40)) {
                return;
             }
             tempData = data;
             if (data == null || data == undefined) {
                    $('.searchNotice').empty().hide();
                return;
             }
             var t = 0;
             for(var i = 0; i < data.length; i++) {
                if (t >= max) {
                   break;
                }
                if (data[i].data.toLowerCase().indexOf(info) > -1) {
                   t++;
                   var temp = {
                      'order': data[i].data.toLowerCase().indexOf(info),
                      'content': data[i].data.toLowerCase(),
                   }
                   res.list.push(temp);
                }
             }
             res.list.sort(function (a, b) {
                return a.order - b.order;
             });
             $('.searchNotice').empty();
             if (res.list == null || res.list.length == 0) {
                $('.searchNotice').empty().hide();
                return;
             }
             $.each(res.list, function (i, e) {
                $('.searchNotice').append('<li title="' + e.content + '">' + 
                    e.content.replace(info, '<span style="color: #FF2F2F;font-weight: bolder;">' + 
                    info + '</span>') + '</li>');
             });
             $('.searchNotice').show();
                $('.searchNotice li').click(function () {
                    $('#searchInput').val($(this).text());
                    $(this).parent().hide();
                });
          }
          if (info.length < 1) {
             $('.searchNotice').empty().hide();
          }
       } else {
          $('.searchNotice').empty().hide();
       }
       
    }
    
    var flag;
    function searchData(data, info, first) {
       if (flag == info) {
          return data;
       } else {
          flag = info;
       }
       var list;
       data = [];
       if (first == true) {
            list = loadTitleList("J");
       } else {
            list = loadTitleList(info);
       }
       if (list != null) {
          data = addData(data, list);
       }
       data = addData(data, ckList);
       if (list != null) {
          data = addData(data, list);
       }
       return data;
    }
    
    function addData(data, source) {
        data = data == null || data == undefined ? [] : data;
       if (source == undefined || source == null) {
          return;
       }
       for (var i = 0; i < source.length; i++) {
            data.push(source[i]);
       }
       return data;
    }
    
    function loadTitleList(info) {
       var data = [];
       $.ajax({
          url: "",
          async: false,
          data: {
             info: info,
             size: 12
          },
          success: function (res) {
             if (res != null && res.resCode == 1) {
                data = res.resData;
             }
          }, error: function () {
             
          },
          dataType: "json"
       });
       return data;
    }

更多技术资源请访问 http://www.zhaochao.top