ajax搜索自动补全

html代码

<input name="enterpriseName" id="sitenameCn" class="inputxt" value="${fm.enterpriseName}" onkeyup="catch_keyword(this.value)"/>
<div id="tips"></div>

js代码

   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 childs="";
                $.ajax({
                    type: 'GET',
                    url: '${pageContext.request.contextPath}/companyInfo/findProsAjax',
                    data: {"name":text},
                    dataType: "json",
                    success: function (obj) {
                        if (obj == "") {
                            //把childs 这div集合放入到下拉提示框的父div中，上面我们以获取了
                            div.style.display = "block";
                            return;
                        }
                        //遍历自己的数据，获取到自己数据里面的值就可以了，我这里返回的是对象，直接.属性出来值，根据自己的数据格式取值即可
                        for (var i = 0; i < obj.length; i++) {
                            childs += "<div οnclick=Write(this) οnmοuseοut='recoverColorwhenMouseout(this)' οnmοuseοver='changeColorwhenMouseover(this)'>"
                                + obj[i] +
                                "</div>";
                        }
                        div.innerHTML = childs;
                        div.style.display = "block";
                    }
                });
            }
        };
    };
    //判断字符串是否全是中文
    function isChn(str) {
        var reg = /^[\u4E00-\u9FA5]+$/;
        if (!reg.test(str)) {
            return false;
        } else {
            return true;
        }
    }
    //鼠标悬停时改变div的颜色
    function changeColorwhenMouseover(div){
        div.style.backgroundColor="#f5f5f6";
    }
    //鼠标移出时回复div颜色
    function recoverColorwhenMouseout(div){
        div.style.backgroundColor="";
    }
    //当鼠标带点击div时，将div的值赋给输入文本框
    function Write(div){
        //将div中的值赋给文本框
        document.getElementById("sitenameCn").value=div.innerHTML;
        //让下拉提示框消失
        div.parentNode.style.display="none";
    };

controller

	@RequestMapping("/findProsAjax")
    @ResponseBody
    public List<String> findProsAjax(@RequestParam(value = "name", required = false) String name) {
        if (null != name && !"".equals(name)) {
            List<String> prosAjax = companyInfoService.findProsAjax(name);
            return prosAjax;
        } else {
            return null;
        }
    }

service

 	@Override
    public List<String> findProsAjax(String companyName) {
        return companyInfoMapper.findProsAjax(companyName);
    }

dao

    /**
     * Ajax实现搜索引擎自动补全
     * @param companyName
     * @return
     */
    List<String> findProsAjax(@Param("companyName") String companyName);

mapper.xml

    <select id="findProsAjax" resultType="string">
        select companyName from system_companyInfo where companyName LIKE CONCAT('%',#{companyName},'%')
    </select>

效果图