搜索提示框实现

最近的项目中，需要设计一个类似百度搜索提示框的效果。使用的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' οnclick=\"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")
	@ResponseBody
	public 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的方法总结