ajax实现搜索自动补全

输入中文自动查询展现如图：输入“山西”

好了来代码：

html

 <input id="sitenameCn" name="sitenameCn" type="text"  class="inputxt" placeholder="请输入关键字搜索" onkeyup="catch_keyword(this.value)" >
 <div id="tips" style="display: none; width:90%;  border: 1px solid pink";></div>


                    

js代码：

<script> 
                    window.onload=function() {
                        //获取文本输入框
                        var textElment = document.getElementById("sitenameCn");
                        //获取下提示框
                        var div = document.getElementById("tips");
                        textElment.onkeyup = function () {
                            //获取用户输入的值
                            var text = textElment.value;
                            //若是文本框中没有值或者值不是中文，则下拉框被隐藏，不显示
                            if ((text = text.replace(/\s*/g, "")) == "" || !isChn(text)) {
                                div.style.display = "none";
                                return;
                            } else {
                                var url = '<%=basePath%>/smoHosptialInfoController.do?seach&sitenameCn=' + text;
                                var childs="";
                                $.ajax({
                                    type: 'GET',
                                    url: url,
                                    dataType: "json",
                                    success: function (obj) {if (obj == "") {
                                            //把childs 这div集合放入到下拉提示框的父div中，上面咱们以获取了
                                            div.innerHTML = "没有这家医院请先添加";
                                            div.style.display = "block";
                                            return;
                                        }
　　　　　　　　　　　　　　　　　　　　　　　　//遍历本身的数据，获取到本身数据里面的值就能够了，我这里返回的是对象，直接.属性出来值，根据本身的数据格式取值便可
                                        for (var i = 0; i < obj.length; i++) {
                                            childs += "<div onclick=Write(this) onmouseout='recoverColorwhenMouseout(this)' onmouseover='changeColorwhenMouseover(this)'>"
                                                + obj[i].sitenameCn +
                                                "</div>";
                                        }
                                        div.innerHTML = childs;
                                        div.style.display = "block";
                                    },
                                    error: function (xhr, errorText, errorType) {        //xhr:XMLHttpRequest对象  errorText:错误信息  erroType：（可选）捕获的异常对象
                                        alert('错误');    //自定义错误
                                        alert(errorText + ':' + errorType);
                                        alert(xmr.status + ':' + xmr, statusText);
                                    }
                                });
                            }
                            sea = text;
                        };
                    };
                    //判断字符串是否全是中文
                    function isChn(str) {
                        var reg = /^[\u4E00-\u9FA5]+$/;
                        if (!reg.test(str)) {
                            return false;
                        } else {
                            return true;
                        }
                    }
                    //鼠标悬停时改变div的颜色
                    function changeColorwhenMouseover(div){
                        div.style.backgroundColor="pink";
                    }
                    //鼠标移出时回复div颜色
                    function recoverColorwhenMouseout(div){
                        div.style.backgroundColor="";
                    }
                    //当鼠标带点击div时，将div的值赋给输入文本框
                    function Write(div){
                        //将div中的值赋给文本框
                        document.getElementById("sitenameCn").value=div.innerHTML;
                        //让下拉提示框消失
                        div.parentNode.style.display="none";
                    };
                </script>

后台代码：

后台本身定义本身的数据格式就能够了，我返回的是json数组对象

    @RequestMapping(params = "seach")
    @ResponseBody
    public List<SmoHosptialInfoEntity> getHosptialName(SmoHosptialInfoEntity smoHosptialInfo, HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid) {
        //查询-机构相关
        String hql0 = "from SmoHosptialInfoEntity where 1 = 1 AND sitename_cn like ? ";
        try {
            List<SmoHosptialInfoEntity> smoHosptialInfos = systemService.findHql(hql0, "%"+smoHosptialInfo.getSitenameCn()+"%");
            return smoHosptialInfos;
        } catch (Exception e) {
            return null;
//            throw new BusinessException(e.getMessage());
        }
    }