input动态下拉--ajax

最新推荐文章于 2021-10-22 15:00:49 发布

原创最新推荐文章于 2021-10-22 15:00:49 发布 · 698 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #java

本文介绍如何通过Ajax技术改进项目界面中的搜索框，实现动态下拉效果，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天优化一下项目界面，吧一个搜索框优化一下

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">


<title>自动显示搜索下拉表单</title>


<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<!-- 引入jquery -->
<script type="text/javascript"
	src="static/jquery/jquery.js"></script>


<script language="javascript" type="text/javascript">
        $(function(){
              $("<ul id='autocomplete'></ul>").hide().insertAfter("#search-text");
            //不能在这里定义自定义的函数，否则无效！！
            });
        function autocomple(){
           $("#autocomplete").empty();
           var question = JSON.stringify({question:$("#search-text").val()});
            console.info($("#search-text").val());
                $.ajax({
                  contentType: "application/json; charset=utf-8",
                   type:"POST",
                   url:"url",
                   dataType:"text",
                   //data:"question="+$("#search-text").val(),
                   data:question,
                   success:function(data,textStatus){
                   var jsondata = JSON.parse(data);
                   console.info(jsondata.data);
                      if(jsondata.data!=null||!"".equals(jsondata.data)){
                          var str = "";
                          $.each(jsondata.data,function(n,obj){
                             $("#autocomplete").show();
                              str = "<li>"+obj.question+"<li>";
                              $("#autocomplete").append(str);
                               $("li").click(function(){
                                //当点击哪个列表时就把它的值load到输入框中
                                 $("#search-text").val($(this).text());
                                 $("#autocomplete").empty();
                                 });
                               //鼠标移到当前元素和移出当前元素的背景色
                               $("li").hover(function(){
                                  $(this).addClass("clor");
                               },function(){
                                   $(this).removeClass("clor");
                               });
                              });
                      }
                     
                   },
                   error:function(textStatus){
                      //alert(textStatus);
                   }
               }); 
             }
             
             function lost(){
             
                //$("#autocomplete").empty();
             }
            
        
    </script>
<style type="text/css">
li {
	list-style: none;
	padding-top: 2px;
	width: 150px;
}


ul {
	margin-top: 5px;
	margin-left: -40px;
}


a {
	text-decoration: none;
	color: #5C5C5C;
}


.clor {
	background-color: #ADADAD;
}
</style>


</head>


<body>
	<form action="EntyToJson" method="post">
		<div id="selelist">
			<input type="text" id="search-text" name="searchValue" value=""
				maxlength="200" onkeyup="autocomple()"> <input
				type="submit" value="搜索" />
		</div>


	</form>
</body>
</html>

效果如图