zoukankan      html  css  js  c++  java
  • PHP联想搜索

      参考: https://blog.csdn.net/myhuashengmi/article/details/51986592

    <meta charset="utf-8">
    <input type="text" name="search_keywords" id="search-key-word" class="x-input" autocomplete="off">
    <div style='750px;background-color: #ffffff;z-index: 100;margin-left:115px;position:absolute;display: none;' id="search_list">
          <ul style="border: 1px solid #ccc;"></ul>
      </div>
    <script src="/jquery/jquery.js"></script> //注意jquery引进路径
    <script>
        $(function(){
    
      $("#search-key-word").keydown(function (e) { 
          if (e.which == 13) {
              $('.btn-search').trigger("click");
          }  
      }); 
      $("#search-key-word").keyup(function(){
        var word = $(this).val();
        var type = $("#search_type").val();
        $.ajax({
            url:'http://suggestion.baidu.com/su?wd='+word+'&cb=showli',
            dataType:'jsonp',
            jsonpCallback:'showli',
            success:function(txt){
                var arr=txt.s;
                var li="";
                $.each(arr,function(i,val){
                    li+="<li style='padding:5px;margin-left:1px'>"+val+"</li> ";
                });
                $("#search_list ul").html(li);
                $("#search_list").slideDown('fast');
                //鼠标经过元素的背景颜色改变
                $("#search_list ul li").bind('mouseenter',function(){$(this).css({'background':'#e1e1e1'})});
                $("#search_list ul li").bind('mouseleave',function(){$(this).css({'background':'#ffffff'})});
                $("#search_list ul li").bind('click',function(){
                    $("#search-key-word").val($(this).text());
                    $("#search_list").slideUp('fast');
                    $('.btn-search').trigger("click");
                });
            }
        });
      });
      $(document).click(function(){
          $("#search_list").hide();
      });
        })
    </script>
  • 相关阅读:
    MongoDB 数组操作
    XPath 详解,总结
    关于python文件操作
    python-时间模块
    MongoDB使用小结:一些常用操作分享
    python操作MongoDB
    Python中的random模块
    网络基本概念
    .net微信开发
    winform listview用法
  • 原文地址:https://www.cnblogs.com/mengwangchuan/p/10899265.html
Copyright © 2011-2022 走看看