input动态下拉--ajax

来源：互联网发布：网络专题策划方案编辑：程序博客网时间：2024/06/05 11:46
今天优化一下项目界面，吧一个搜索框优化一下
<%@ 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()"> <inputtype="submit" value="搜索" /></div></form></body></html>
效果如图
阅读全文
0 0