Jpetstore——使用AJAX和jQuery改善用户体验2（查询商品模块）

深藏阁楼爱情的钟 2021-11-09 10:24 284阅读 0赞

## Jpetstore——使用AJAX和jQuery改善用户体验2（查询商品模块） ##

CSDN下载：[基于MVC用JSP/Servlet实现JPetStore——使用AJAX和jQuery改善用户体验][MVC_JSP_Servlet_JPetStore_AJAX_jQuery]

--------------------

1.  查询商品模块。在主页面右上角的查询商品功能中添加自动补全功能。

--------------------

**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 1]  
**实现方法：**  
  查询商品的自动补全功能基本设计流程是一样，本功能的难点在于js中对搜索到的结果的样式和事务处理。  
  首先在jsp中引入该js文件，接下来js中首先进行获取搜索关键字，然后通过servlet层获取所有的结果，并将结果以字符串的形式返回到js中，最后，js则将结果转化为数组形式然后通过相对应的样式显示在搜索框下方。  
  js中还需要处理的是对于搜索到的结果进行样式匹配加以区分，当加入关键字或者删除关键字时，搜索到的结果要及时进行变更，搜索栏得到结果中包含的关键字需要进行加粗的样式处理从而能够区分开。

**核心源代码：**  
css：

div.wrap{ 
        width: 240px;
        margin: 20px auto 0 auto;
    }
    .auto-inp{ 
        width: 240px;
        height: 36px;
        padding-left: .5em;
        border-radius: 2px;
        border: 1px solid #dedede;
        color: #666;
        outline: none;
    }
    .auto{ 
        width: 240px;
        border: 1px solid #dedede;
        border-top: none;
        position: absolute;
    }
    .auto_out{ 
        width: 238px;
        height: 36px;
        line-height: 36px;
        padding-left: .5em;
        color: #000;
        background: #fff;
        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
    .auto_out.on{ 
        background: #eee;
        cursor: pointer;
    }
    .hidden{ 
        display: none;
    }

js：

Array.prototype.unique = function(){ 
        this.sort();
        var res = [];
        var json = { };
        for (var i = 0; i < this.length; i++) { 
            if(!json[this[i]]){ 
                res.push(this[i]);
                json[this[i]] = 1;
            }
        }
        return res;
    }
    
    // 对样式操作
    var setClass = { 
        hasClass: function(elements,cName){  // 判断是否含有某个class
            if(elements.className.match(new RegExp( "(\\s|^)" + cName + "(\\s|$)") ))
                return true;
            else
                return false;
        },
        addClass: function(elements,cName){  // 添加class
            if( !this.hasClass( elements,cName ) ){ 
                elements.className += " " + cName;
            };
        },
        removeClass: function(elements,cName){   // 移除某个class
            if( this.hasClass( elements,cName ) ){ 
                elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " );
            }
        }
    }
    
    var Bind = function(This){ 
        return function(){ 
            This.init();
        }
    }
    
    function AutoComplete(keyword,auto,arr) { 
        this.obj = document.getElementById(keyword);
        this.autoObj = document.getElementById(auto);
        this.search_value = ""; //当前的搜索输入值
        this.index = -1;        //当前选中的DIV的索引
        this.value_arr = arr;   //数据库中供检索的值 不包含重复值
    }
    AutoComplete.prototype = { 
            // 初始化
            init: function(){ 
                var This = this;
                setClass.removeClass(This.autoObj,"hidden");
                this.autoObj.style.left = this.obj.offsetLeft + "px";
                this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
            },
            //删除自动完成需要的所有DIV
            deleteDIV: function(){ 
                while(this.autoObj.hasChildNodes()){ 
                    this.autoObj.removeChild(this.autoObj.firstChild);
                }
                setClass.addClass(this.autoObj,"hidden");
            },
            autoOnmouseover: function(index){ 
                if(index != this.index){ 
                    setClass.addClass(this.autoObj.children[index],"on");
                    setClass.removeClass(this.autoObj.children[this.index],"on");
                    this.index = index;
                }
            },
            setValue: function(This){ 
                return function(){ 
                    This.obj.value = this.seq;
                    setClass.addClass(This.autoObj,"hidden");
                }
            },
            // 响应键盘
            pressKey: function(event){ 
                var code = event.keyCode;
                var length = this.autoObj.children.length;
                if(code == 38){      //↑
                    setClass.removeClass(this.autoObj.children[this.index],"on");
                    this.index--;
                    if(this.index < 0){ 
                        this.index = length - 1;
                    }
                    setClass.addClass(this.autoObj.children[this.index],"on");
                    this.obj.value = this.autoObj.children[this.index].seq;
                }else if(code == 40){    //↓
                    setClass.removeClass(this.autoObj.children[this.index],"on");
                    this.index++;
                    if(this.index > length-1){ 
                        this.index = 0;
                    }
                    setClass.addClass(this.autoObj.children[this.index],"on");
                    this.obj.value = this.autoObj.children[this.index].seq;
                }else{           //回车
                    this.obj.value = this.autoObj.children[this.index].seq;
                    setClass.addClass(this.autoObj,"hidden");
                    this.index = -1;
                }
            },
            // 程序入口
            start: function(event){ 
                event = event || window.event;
                var code = event.keyCode;
                var This = this;
                if(code != 13 && code != 38 && code != 40){ 
                    this.init();
                    this.deleteDIV();
                    this.search_value = this.obj.value;
                    var valueArr = this.value_arr.unique();
                    //去掉前后空格不能为空
                    if(this.obj.value.replace(/(^\s*)|(\s*$)/g,"") == ""){  return;}
                    //判断数组中是否含有输入的关键字
                    try{ 
                        var reg = new RegExp("("+ this.obj.value +")","i"); //输入"aaa" 则 reg = /(aaa)/i
                    }catch(e){ 
                        alert(e.message);
                    }
                    var div_index = 0;  //记录匹配索引个数
                    for (var i = 0; i < valueArr.length; i++) { 
                        if(reg.test(valueArr[i])){ 
                            var div = document.createElement("div");
                            div.className = "auto_out";
                            div.seq = valueArr[i];
                            div.index = div_index;
                            div.innerHTML = valueArr[i].replace(reg,"<strong>$1</strong>");
                            this.autoObj.appendChild(div);
                            setClass.removeClass(this.autoObj,"hidden");
                            div_index++;
                            if(div_index == 1) { 
                                setClass.addClass(this.autoObj.firstChild,"on");
                                this.index = 0;
                            }
                            div.onmouseover = function(){ 
                                This.autoOnmouseover(this.index);
                            }
                            div.onclick = this.setValue(This);
                        }
                    }
                }else{ 
                    this.pressKey(event);
                }
                window.onresize = Bind(This);
            }
        }
    
    var xmlHttpRequest;
    function createXMLHttpRequest(){ 
        ……
    }
    
    var keyword = document.getElementById('keyword').value;
    sendRequest("findResultServlet?keyword=" + keyword);
    
    function sendRequest(url) { 
        ……
    }
    function processResponse() { 
        if (xmlHttpRequest.readyState == 4) { 
            if (xmlHttpRequest.status == 200) { 
                var resp = xmlHttpRequest.responseText;
                var array = resp.split(",");
                var autoComplete = new AutoComplete("keyword","auto",array);
                document.getElementById("keyword").onkeyup = function(event){ 
                    autoComplete.start(event);
                }
            }
        }
    }

servlet：

//获取搜索框输入的内容
    String keyword = request.getParameter("keyword");
    //向server层调用相应的业务
    CatalogService service = new CatalogService();
    List<Product> productList = service.searchProductList(keyword);
    
    response.setContentType("text/xml");
    PrintWriter out = response.getWriter();
    
    //返回结果
    String res = "";
    for(int i=0; i<productList.size(); i++){ 
        if(i>0){ 
            res += "," + productList.get(i);
        }else{ 
            res += productList.get(i);
        }
    }
    out.write(res);
    
    out.flush();
    out.close();

--------------------

完整项目文档及源码请参考：[实验二 使用AJAX和jQuery改善用户体验][_AJAX_jQuery]

--------------------

[MVC_JSP_Servlet_JPetStore_AJAX_jQuery]: https://download.csdn.net/download/qq_39564555/11465162
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]: /images/20211109/e3d0b298df7f4ca0b8c07edf2ffffef6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 1]: /images/20211109/ee24fe6709004b868155adcd0e809c4b.png
[_AJAX_jQuery]: https://github.com/zz2summer/JavaWeb-Application-Developing-Technology/tree/master/%E5%AE%9E%E9%AA%8C%E7%9B%B8%E5%85%B3/%E5%AE%9E%E9%AA%8C%E4%BA%8C%20%20%E4%BD%BF%E7%94%A8AJAX%E5%92%8CjQuery%E6%94%B9%E5%96%84%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C