搜索提示框实现

来源：互联网发布：什么是主域名与子域名编辑：程序博客网时间：2024/05/16 15:54

最近的项目中，需要设计一个类似百度搜索提示框的效果。使用的bootstrap的列表组样式

头部引入

<link rel="stylesheet" href="${ctx}/static/script/prompt/bootstrap/css/bootstrap.css" ><script src="${ctx}/static/js/jquery-1.10.2.js" ></script><script src="${ctx}/static/script/prompt/bootstrap/js/bootstrap.js"></script>

js编写

 <script type="text/javascript">    //判断是否空字符串或空格    function isNull( str ){if ( str == "" ) return true;var regu = "^[ ]+$";var re = new RegExp(regu);return re.test(str);}    function skkip(name){//alert(name);//debugger;$("#value").val(name);$("#completeShow").hide();}$(function(){//绑定事件$("#value").keyup(function(){//2.使用ajax访问服务器//2.1 获得数据var searchWord = $("#value").val();if(isNull(searchWord)){$("#completeShow").hide();return;}//清空$("#addPrompt").html("");//2.2 发送请求$.ajax({url : ctx+'/search/prompt',type : "post",data : {"entname":searchWord},datatype : 'json',async : false,//同步执行success : function(data) {//alert(data);//**$(data).each(function(){//alert(data.lenght);//this代表当前product的对象//alert(this.pname);/*  <ul class="list-group" id="addPrompt">  <li class="list-group-item">Cras justo odio</li></ul>  *///添加数据 向ul里添加  此处append是追加 在每一次搜索之前清空//debugger;$("#addPrompt").append(" <li   class='list-group-item' onclick=\"skkip('"+this+"')\">"+this+"</li>");$("#completeShow").show();});//**},error : function(data) {//alert("error");}})});$("#value").focusout(function() {  $("#completeShow").hide("fast");});  $("#value").focusin (function() {  $("#completeShow").show("fast");}); })    </script>

搜索框及下拉框

<input type="text" id="value" name="value" placeholder="请输入医院 如“北大医院”" autofocus="">

 <div id="completeShow" style="width:665px;display:block;overflow:hidden">        <ul class="list-group" id="addPrompt" style="margin-top:0" ></ul>       </div>

controller接口返回的是List集合，从solr查的数据

@Controller@RequestMapping("/search")public class SearchPromptController {@RequestMapping("/prompt")@ResponseBodypublic List<String> searchprompt(HttpServletRequest request,String entname) throws Exception{Object obj = RedisUtils.get(ConstantUtils.RedisDomain.SOLR_INTERFACE_DN, ConstantUtils.SolrName.YLQST_ENTFIND,RedisUtils.DB.DB0);String solrUrl = obj.toString() ;List<String> list=new ArrayList<String>();    HttpSolrClient solrServer = new HttpSolrClient(solrUrl);       SolrQuery solrQuery = new SolrQuery();      solrQuery.setQuery(entname);    //设置默认搜索Field域solrQuery.set("df", "ENTNAME");    solrQuery.setStart(0);    solrQuery.setRows(5);      QueryResponse queryResponse = solrServer.query(solrQuery);    SolrDocumentList results = queryResponse.getResults();    for (SolrDocument solrDocument : results) {    list.add((String) solrDocument.get("ENTNAME"));    //System.out.println(solrDocument.get("ENTNAME"));} return list;}}

最后的效果如图：

参考文章：

js判断输入字符串是否为空、空格、null的方法总结

阅读全文

0 0