智能提示

简介：自动提示无非就是输入框内容改变时，自动根据输入的内容进行模糊查询；

手动实现无非两种方式，一种异步加载数据，根据获取的内容异步加载到网页相应位置，第二种同步获取数据，然后异步根据输入框的改变进行查询；

异步由于得到的就是json很好处理，今天经过摸索倒是想到了另一种方法，有点奇葩，写出来与大家分享，欢迎大家指点；

思路：采用第二种方法，同步获取数据，用c标签实现遍历，然后进行判断显示；

相关js代码：

function autoHintW(){
    $("#processList0").empty();
    var p="", q="", value="";
        q+="<c:if test='${users!=null }'>";
        q+="    <c:forEach items='${users }' var='vr'>";
        p = "";
        p+="        <li>";
        value = '${vr.USER_ID}_${vr.NAME }';
        p+="            <input type='radio' name='users' value="+value+">";
        p+="            <input type='checkbox' name='cusers' value='"+value+"'>";
        p+="            <label class='abc'>${vr.NAME }</label>";
        p+="        </li>";
        var xx = $("#tab0 input[type=text]").val();
        if(xx == "" || value.indexOf(xx) >= 0){
            $("#processList0").append(p);
        }
    q+="    </c:forEach>";
    q+="</c:if>";
    load();
}

相关网页代码：

<div id="tab0">
    <input type="text" style="margin-top: 10px;"/>
    <ul id="processList0">
        <script>
            autoHintW();
        </script>
    </ul>
</div>

当然智能提示存在鼠标键盘事件，本来想用onchange的但是鼠标必须移开输入框才会触发，所以考虑用keyup，但是触发太过频繁，需要设置时间响应：

$("#tab0 input[type=text]").keyup(function(){
    setTimeout("autoHintW()",1000);
});
$("#tab1 input[type=text]").keyup(function(){
    setTimeout("autoHintD()",1000);
});
$("#tab2 input[type=text]").keyup(function(){
    setTimeout("autoHintR()",1000);
});

 

 欢迎大家访问我的博客：http://www.cnblogs.com/handsomecui/p/7235806.html