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>
  • 相关阅读:
    Html 回顾
    Parallel 并行编程
    Task---常用的多线程(基于多线程线程)
    Threadpool 可以对线程加以管理的封装
    AsyncThreads---异步多线程
    Abstract 封装,继承,多态
    IO&&Serize 利用线程Thread.Sleep实现"自动输出"
    Ling && Lambda
    Delegate&&Event
    Delegate &&Lambda
  • 原文地址:https://www.cnblogs.com/mengwangchuan/p/10899265.html
Copyright © 2011-2022 走看看