jquery实现的类似百度搜索的输入框自动完成功能

最新推荐文章于 2022-11-03 11:07:03 发布

chuleigang4140

最新推荐文章于 2022-11-03 11:07:03 发布

阅读量365

点赞数

文章标签： javascript json java ViewUI

原文链接：https://my.oschina.net/u/2615543/blog/688480

版权

    <%@ page language="java" contentType="text/html; charset=UTF-8"%>
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>搜索词自动完成</title>
   <style type="text/css">
   #search{
   text-align: center;
   position:relative;
   }
   .autocomplete{
   border: 1px solid #9ACCFB;
   background-color: white;
   text-align: left;
   }
   .autocomplete li{
   list-style-type: none;
   }
   .clickable {
   cursor: default;
   }
   .highlight {
   background-color: #9ACCFB;
   }
   </style>
   <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.7.js""></script>
   <script type="text/javascript">
   $(function(){
   //取得div层
   var $search = $('#search');
   //取得输入框JQuery对象
   var $searchInput = $search.find('#searchtext');
   //关闭浏览器提供给输入框的自动完成
   $searchInput.attr('autocomplete','off');
   //创建自动完成的下拉列表，用于显示服务器返回的数据,插入在搜索按钮的后面，等显示的时候再调整位置
   var $autocomplete = $('<div class="autocomplete"></div>')
   .hide()
   .insertAfter('#submit');
   //清空下拉列表的内容并且隐藏下拉列表区
   var clear = function(){
   $autocomplete.empty().hide();
   };
   //注册事件，当输入框失去焦点的时候清空下拉列表并隐藏
   $searchInput.blur(function(){
   setTimeout(clear,500);
   });
   //下拉列表中高亮的项目的索引，当显示下拉列表项的时候，移动鼠标或者键盘的上下键就会移动高亮的项目，想百度搜索那样
   var selectedItem = null;
   //timeout的ID
   var timeoutid = null;
   //设置下拉项的高亮背景
   var setSelectedItem = function(item){
   //更新索引变量
   selectedItem = item ;
   //按上下键是循环显示的，小于0就置成最大的值，大于最大值就置成0
   if(selectedItem < 0){
   selectedItem = $autocomplete.find('li').length - 1;
   }
   else if(selectedItem > $autocomplete.find('li').length-1 ) {
   selectedItem = 0;
   }
   //首先移除其他列表项的高亮背景，然后再高亮当前索引的背景
   $autocomplete.find('li').removeClass('highlight')
   .eq(selectedItem).addClass('highlight');
   };
   var ajax_request = function(){
   //ajax服务端通信
   $.ajax({
   'url':'<%=request.getContextPath()%>/getmessage.action', //服务器的地址
   'data':{'searchtext':$searchInput.val()}, //参数
   'dataType':'json', //返回数据类型
   'type':'post', //请求类型
   'success':function(data){
   alert($searchInput.val());
   alert(data)
   if(data.length) {
       for(var i in data){

       }
   //遍历data，添加到自动完成区
   $.each(data, function(index,term) {
   //创建li标签,添加到下拉列表中
   $('<li></li>').text(term).appendTo($autocomplete)
   .addClass('clickable')
   .hover(function(){
   //下拉列表每一项的事件，鼠标移进去的操作
   $(this).siblings().removeClass('highlight');
   $(this).addClass('highlight');
   selectedItem = index;
   },function(){
   //下拉列表每一项的事件，鼠标离开的操作
   $(this).removeClass('highlight');
   //当鼠标离开时索引置-1，当作标记
   selectedItem = -1;
   })
   .click(function(){
   //鼠标单击下拉列表的这一项的话，就将这一项的值添加到输入框中
   $searchInput.val(term);
   //清空并隐藏下拉列表
   $autocomplete.empty().hide();
   });
   });//事件注册完毕
   //设置下拉列表的位置，然后显示下拉列表
   var ypos = $searchInput.position().top;
   var xpos = $searchInput.position().left;
   $autocomplete.css('width',$searchInput.css('width'));
   $autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"});
   setSelectedItem(0);
   //显示下拉列表
   $autocomplete.show();
   }
   }
   });
   };
   //对输入框进行事件注册
   $searchInput
   .keyup(function(event) {
   //字母数字，退格，空格
   if(event.keyCode > 40 || event.keyCode == 8 || event.keyCode ==32) {
   //首先删除下拉列表中的信息
   $autocomplete.empty().hide();
   clearTimeout(timeoutid);
   timeoutid = setTimeout(ajax_request,100);
   }
   else if(event.keyCode == 38){
   //上
   //selectedItem = -1 代表鼠标离开
   if(selectedItem == -1){
   setSelectedItem($autocomplete.find('li').length-1);
   }
   else {
   //索引减1
   setSelectedItem(selectedItem - 1);
   }
   event.preventDefault();
   }
   else if(event.keyCode == 40) {
   //下
   //selectedItem = -1 代表鼠标离开
   if(selectedItem == -1){
   setSelectedItem(0);
   }
   else {
   //索引加1
   setSelectedItem(selectedItem + 1);
   }
   event.preventDefault();
   }
   })
   .keypress(function(event){
   //enter键
   if(event.keyCode == 13) {
   //列表为空或者鼠标离开导致当前没有索引值
   if($autocomplete.find('li').length == 0 || selectedItem == -1) {
   return;
   }
   $searchInput.val($autocomplete.find('li').eq(selectedItem).text());
   $autocomplete.empty().hide();
   event.preventDefault();
   }
   })
   .keydown(function(event){
   //esc键
   if(event.keyCode == 27 ) {
   $autocomplete.empty().hide();
   event.preventDefault();
   }
   });
   //注册窗口大小改变的事件，重新调整下拉列表的位置
   $(window).resize(function() {
   var ypos = $searchInput.position().top;
   var xpos = $searchInput.position().left;
   $autocomplete.css('width',$searchInput.css('width'));
   $autocomplete.css({'position':'relative','left':xpos + "px",'top':ypos +"px"});
   });
   });
   </script>
   </head>
   <body>
   <div id = "search">
   <label for="searchtext">请输入关键词</label><input type="text" id="searchtext" name="searchtext" />
   <input type="button" id="submit" value="搜索"/>
   </div>
   </body>
   </html>

接下来我们的服务端写在了jsp上

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String []words = {"amani","abc","apple","abstract","an","bike","byebye",
"beat","be","bing","come","cup","class","calendar","china"};
if(request.getParameter("search-text") != null) {
String key = request.getParameter("search-text");
if(key.length() != 0){
String json="[";
for(int i = 0; i < words.length; i++) {
if(words[i].startsWith(key)){
json += "\""+ words[i] + "\"" + ",";
}
}
json = json.substring(0,json.length()-1>0?json.length()-1:1);
json += "]";
System.out.println("json:" + json);
out.println(json);
}
}
%>

转载于:https://my.oschina.net/u/2615543/blog/688480

chuleigang4140

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现的类似百度搜索的输入框自动完成功能

<%@ page language="java" contentType="text/html; charset=UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "...
复制链接

扫一扫