向文本框添加自动提示功能

1.sql

create table users(id int(11) not null auto_increment,
username varchar(32) not null,
password varchar(32) not null,
primary key(id));

insert into users values(1,'holmes','sherlockhlmes'),(2,'watson','johnwatson'),(3,'sati','dd'),(4,'mantu','ajayjoshi');

3.index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{font-family:"trebuchet MS",Arial;
font-size:14px;width:500px;
}
.autosuggest{
     width:200px;
top:5px;
position:relative;
}
input{width:200px;}
#suggestions{
     position:absolute;
     list-style:none;
     margin:0;
     padding:0;
     width:200px;
     display:none;
     background-color:#ECECF6;
     top:20px;
     left:0px;
}
#suggestion li{
     cursor:pointer;
     padding:5px;
     border-right:1px solid #000;
     border-bottom:1px solid #000;
     border-left:1px solid #000;
}

.active{
     background-color:red;
     color:#fff;
}
#error{
     top:25px;
     font-weight:bold;
     color:#ff0000;
}
#loader{
     position:absolute;
     top:2px;
     right:0;
     display:none;
}

</style>

</head>
<body>
<div class="autosuggest">
     <input type="text" id="suggest" />
     <ul id="suggestions">
     </ul>
     <img src="load.gif" alt="loading" title="loading" id="loader" />
     <span id="error"></span>

</div>

<script type="text/javascript" src="../jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){

     var xhr;
     $('#suggest').keyup(getSuggestion);
     $('#suggest').keydown(navigateList);
     $('#suggestions>li').live('mouseover mouseout click',listHover);

     function getSuggestion(event){
          var value=$.trim($(this).val());
          if(value==''||event.which==27){
               $('#suggestions').empty().hide();
               $('#loader').hide();
          }

          if((event.which>=65)&&event.which<=90||event.which==8||event.which==46){
               $('#loader').show();
               if(xhr) xhr.abort();
               if(value.length>=1){
                    xhr=$.getJSON('suggestions.php',{input:value},showSuggestions);
               }else{
                    $('#loader').hide();
               }
          }
     }

     function showSuggestions(data){
          if(data==false){
               $('#error').html('No results').show();
               $('#suggestions').empty().hide();
          }else{
               var str='';
               $('#error').empty().hide();
               for(var i=0;i<data.length;i++){
                    str+='<li>'+data[i]+'</li>';
               }
               $('#suggestions').html(str).show();
          }
          $('#loader').hide();
     }

     function navigateList(event){
          switch(event.which){
          case 38:
               if($('#suggestions>li.active').length>0){
                    $('#suggestions>li.active').removeClass('active').prev().addClass('active');
               }else{
                    $('#suggestions>li:last').addClass('active');
               }
               break;
          case 40:
               if($('#suggestions>li.active').length>0){
                    $('#suggestions>li.active').removeClass('active').next().addClass('active');
               }else{
                    $('#suggestions>li:first').addClass('active');
               }
               break;
          case 13:
               $('#suggest').val($('#suggestions>li.active').html());
               $('#suggestions').empty().hide();
               break;
          }

     }

     function listHover(event){
          if(event.type=='mouseover'){
               $('#suggestions>li.active').removeClass('active');
          }
          $(this).toggleClass('active');
          if(event.type=='click'){
               $('#suggest').val($(this).html());
               $('#suggest').focus();
          }
     }
});

</script>
</body>
</html>

4.后台服务 suggestions.php

<?php
$query="select username from users where username like '%".$_GET['input']."%'";

$mysqli=new mysqli('localhost','root','','test');
$result=$mysqli->query($query);
$arr=array();
if($result->num_rows>0){
     while($row=$result->fetch_array()){
          $arr[]=$row[0];
     }
}

echo json_encode($arr);

posted @ 2014-03-31 17:35 wint Views(197) Comments(0) 收藏举报

刷新页面返回顶部

wint

向文本框添加自动提示功能

公告