jQuery实现自动提示，分类选择等功能的搜索框

最新推荐文章于 2022-06-25 21:48:24 发布

DegoLee

最新推荐文章于 2022-06-25 21:48:24 发布

阅读量4.5k

点赞数

分类专栏： java 文章标签： jquery 搜索

本文链接：https://blog.youkuaiyun.com/b809220024/article/details/62057646

版权

本文详细介绍了如何利用jQuery实现搜索框的自动提示功能，包括输入时的实时显示，点击提示项填充搜索框，以及分类搜索的实现方法。在自动提示中，结合propertychange事件处理中文输入法下的问题，通过拼接URL向后端传递参数。同时，文章展示了搜索结果的显示和隐藏逻辑，以及点击提示项后的响应操作。分类搜索则通过判断页面参数，动态加载对应内容。

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

文章的三个部分：
1.方法讲解
2.效果展示
3.代码
1.方法讲解

自动提示（效果见第一张图）
思路很简单，就是用jquery把输入结果和查询绑定，然后拼接显示出来就行了。
具体代码见3.searchResult的//自动提示——搜索框

①首先关于绑定input，propertychange事件，大多情况下input能够正常提示要显示的结果，但是笔者在中文输入法下回车输入英文，并不会出结果，所以添加了propertychange事件.
详情参考
http://blog.youkuaiyun.com/this_itboy/article/details/51727226
②向action传值时，
‘${pageContext.request.contextPath}/bid/reAction_autoComplete.action?keyWord=’+searchText+’&keyType=’+keyType,
用&传第二个值
③拼接自动提示的结果

for(var i=0;i<d.length;i++){
                 html+= '<li>'+d[i].searchText+'</li>' ;
              }

④搜索框默认情况下是不显示的，用hide()方法隐藏，当输入结果时，自动出现并定位在搜索框下方
这里的search-suggest就是智能提示的id

$('#search-suggest').show().css({
                    top:$('#search-form').offset().top+$('#search-form').height(),
                    left:$('#search-form').offset().left,
                    position:'absolute',
                    width:inputBoxW-inputBtnW
                });

然后点击空白处，提示框消失

$(function(){
   
        $(document).bind('click',function(){
   
         $('#search-suggest').hide();
        });

⑤在点击智能提示的数据时，把提示的内容放到搜索框里面并执行方法
这里如果不知道怎么具体找值，可以先把this输出，然后在console里面找，这里感谢Johnson的帮助，用处很大。

 $("#search-result li").click(function(){
   
                    var $this=$(this);
                    console.log($this["0"].innerText);
                    $('#search_input').val($this["0"].innerText);
                    $("#ss").click();
                });

2.分类搜索

在这里，我采用了比较简单的方法。就是把页面分成两个部分，显示搜索结果的searchResult_content.jsp和大页面的searchResult.jsp
每次执行搜索的时候，只要先判断searchResult里面的参数，然后传给后台执行返回显示结果的内容就好了。
这里没什么难度，值得一提的是，可以通过下列方式调用css样式，其中faultLight是默认的颜色样式。

var faultLight={
            'color':'#000',
            'background-color':'#FFF'
        }

$("#publishDatetime").css(highLight);

2.效果展示

自动提示功能：

搜索结果及分类搜索
3.代码：
1.这是主页的搜索框页面代码 searchBox.jsp

<!--搜索框-->
<form id="searchArea" class="navbar-form navbar-right form-inline paddingLRzero" role="search">
                            <div class="form-group">
                                 <input type="text" id="searchInput" class="form-control search-input" name="keyWord" placeholder="请输入关键词">
                            </div>
                            <button  type="button" id="searchBtn" class="btn btn-default">
                               <span class="glyphicon glyphicon-search"></span>                       
                            </button>
                      </form> 

 //搜索
    $("#searchBtn").click(function(){
        var keyWord=$('#searchInput').val();
        $.ajax({   
            url:'${pageContext.request.contextPath}/bid/reAction_querySearchResult.action',
            type:'POST',
            data:{
                  pageNo:1,
                  keyWord:keyWord
            },
            success:function(data){    
                location.href='/DataMarket/searchResult?keyWord='+keyWord
            },
        })

    })

2.这里是主搜索框及页面的代码searchResult.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>搜索结果</title>
<%@include file="/public/website-head.jspf"%> 
<script type="text/javascript">
        //初始条件
        //高亮

        var highLight={ 
            'background-color':'#0099FF',
            'color':'white'
        }
        //默认亮度
        var faultLight={
            'color':'#000',
            'background-color':'#FFF'
        }

        var keyType="resource";
        var sortValue="publishDatetime";
    $(function(){
    

        $("#resource").css(highLight);
        $("#publishDatetime").css(highLight);

        //把搜索类型按钮   绑定点击事件
        $("#search-list li").click(function(){
    
            var $this=$(this);
            keyType=$this["0"].attributes["1"].value
            if(keyType=="requirement"){
                $("#buyCount").hide();
                if(sortValue=="buyCount"){
                    sortValue="publishDatetime";
                    $("#publishDatetime").css(highLight);
                }
            }else{
                $("#buyCount").show();
            }
            $this.css('background-color','#13c5c4')
            $("#search-list li").css(faultLight);
            $this.css(highLight);
            console.log($this["0"].attributes["1"].value);
            $("#ss").click(); 
        });
        //把排序方式  绑定点击事件
        $("#search-sort li").click(function(){
    
            var $this=$(this);
            sortValue=$this["0"].attributes["1"].value
            $("#search-sort li").css(faultLight);
            $this.css(highLight)
            console.log(sortValue);
            $("#ss").click(); 
        });
        //绑定回车事件，有问题
        $("body").keydown(function() {
    
            if(event.keyCode=="13"){ 

            $("#ss").click(); 
        } 
        }); 

     $("#ss").click(function(){
    
        // 载入
        var dialog = bootbox.dialog({
            message: '<p><i class="fa fa-spin fa-spinner"></i> 载入中...</p>',
            closeButton: false
        }); 
         var pageNo=$("#hidCurrentPage").val();
         var keyWord=$('#search_input').val();
         if(keyWord.length==0){
             dialog.modal('hide');// 载入结束

         }else{
             if(pageNo==''||typeof(pageNo)==undefined){
                 $.ajax({
                    url:'${pageContext.request.contextPath}/bid/reAction_complexSearch.action',
                    type:'POST',
                    data:{
                        pageNo:1,   
                        keyType:keyType,
                        keyWord:keyWord,
                        sortValue:sortValue
                    },
                    success:function(data){
        
                        $('#110').html(data);
                        dialog.modal('hide');// 载入结束
                    },
                    error:function(){
    
                        dialog.modal('hide');// 载入结束
                        errorTip();//出错提示       
                    },

                }); 
             }else{
                 $.ajax({
                    url:'${pageContext.request.contextPath}/bid

最低0.47元/天解锁文章