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());
        }
    }