ajax+php实现类似百度搜索框&&js中click和blur冲突问题

  初学ajax,模仿百度搜索框写了一个小东西

实现：     

 

搜索框代码：

<input type="text" id="s_number" class="form-control" placeholder="请输学生学号" 
aria-label="请输入学生学号">
<div id="searchBox" class="serdiv" display: none> </div>

js部分：

  对数据库中匹配的字段不同部分标黑

  以及点击下拉列表中的内容直接加入

$('#s_number').keyup(function(){
        if(xhr){
          xhr.abort();//如果存在ajax的请求，就放弃请求
        }
         var textvalue=$.trim($(this).val());
         if(textvalue!='')
         {
         var  xhr=$.ajax({
            type:"get",
            url:'student_cheak.php',
            cache:false,
            data: 'textvalue='+textvalue,
            dataType:'json',//返回数据类型
            success:function(json){   //任意取名
              if(json.length!=0)
              {
                var lists='<ul >';
                $.each(json,function(){
                  lists+="<li>"+textvalue+'<b>'+this.s_name.substr(textvalue.length)+'</b></li>';
                })
                lists+="</ul><div class='serdiv1'></div>";//下拉框底部加灰色样式
                $("#searchBox").html(lists).show();
                $("li").click(function(){
                  $('#s_number').val($(this).text());//this始终指向js对象
                  $("#searchBox").hide();
                }).mouseover(function(){//这两个事件显示当前鼠标所在下拉列位置
                  $(this).css({"background":"#ada99b1a"})
                }).mouseout(function(){
                  $(this).css({"background":"#00000000"})
                })
              }else{
                $("#searchBox").hide();
              }
            }
          });
         }else{
          $("#searchBox").hide();
         }
     }).blur(function(){    
      setTimeout(function(){   //
             $("#searchBox").hide(); ;
        }, 300);
    });

          后端php使用pdo方式连接数据库

注意变量加入sql字符串的方法以及%的位置

<?php
   function connectDb(){  //连接
		$servername = "localhost";
		$username = "root";
		$password = "123";
		$dbname="mydatabase";
		 
		try {
		    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
		}
		catch(PDOException $e)
		{
		     exit('数据库连接失败');
		}
		return $conn;
	}
    
    function test($keyword){//从数据库中查找关键字的函数
		$db=connectDb();
		$result=$db->prepare("select s_name from my_student where s_name like '{$keyword}%'");
		$result->execute();
		return $result->fetchAll(PDO::FETCH_ASSOC);
	}
	$keyword=$_GET['textvalue'];
	$suggestion=test($keyword);
	echo json_encode($suggestion);
?>

       期间遇到一个问题，由于输入框绑定了blur事件以及生成的下拉列表绑定了click事件，点击下拉列表触后先触发了blur事件隐藏后触发不了click事件，最后百度大法成功解决

    JavaScript为单线程，而blur事件优先级高于click,只会执行前者。

解决1：定时器后置blur事件中的下拉列表隐藏，

解决2：mousedown代替click事件，

    点击事件的优先级：mousedown>blur>mouseup>click