Js_Ajax_输入词提示

输入"1",有提示,否则没有

suggest.jsp

#suggest {
    background-color: #e0e0e0;
    width: 200px;
}
    var xhr;
    function createXhr() {
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    /* 提示词被选中 */
    function select(divElm){
        var inputElm = document.getElementById("keyword");
        // 选中提示词
        inputElm.value=divElm.innerText;
        // 关闭提示框
        document.getElementById("suggest").innerHTML="";
    }
    /* 输入后提示(输入1,有提示,否则没有) */
    function search() {
        var inputElm = document.getElementById("keyword");
        // 获取输入的内容
        var inputWord = inputElm.value;

        createXhr();
        xhr.onreadystatechange = function cbSearch() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var rsp = xhr.responseText;
                var json = eval("(" + rsp + ")");

                // 获取提示词组
                var array = json.array;

                var addHtml = "";
                if (array!=null) {
                    // 提示词组不为空,循环取词,添加div
                    for ( var idx in array) {
                        addHtml += "<div onclick=‘select(this)‘>" + array[idx] + "</div>";
                    }
                }
                //提示框 设 提示词
                document.getElementById("suggest").innerHTML = addHtml;
            }
        };
        xhr.open("get", "AjaxServlet?para=" + inputWord, true);
        xhr.send(null);
    }
    <!-- 按键抬起才能取到输入内容,否则(keypress/keydown)是上次输入内容 -->
    <input type="text" id="keyword" onkeyup="search()">
    <br>
    <div id="suggest"></div>

AjaxServlet.java

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            response.setCharacterEncoding("utf-8");
            AhJson aj = new AhJson();
            String para=request.getParameter("para");

            JSONObject jo = new JSONObject();
            JSONArray a = new JSONArray();
            if ("1".equals(para)){
                a.add("1");
                a.add("163");
                a.add("12306");
                jo.put("array", a);
            }
            response.getWriter().write(jo.toString());

    }

时间: 2024-10-19 09:42:16

Js_Ajax_输入词提示的相关文章

设计一个查询词提示系统

查询词提升是现代搜索引擎中广泛使用的一种技术,当用户输入查询词前缀时,会给出一系列相关的查询词推荐,例如在搜索框内输入"中国",会提升"中国好声音","中国银行", "中国联通"等,尝试设计一个查询词提示系统,回答以下问题: 1.给定一个查询词集合,用何种数据结构和算法来构建最基本的提示系统?要求输入中文和拼音都能正常工作 2.用户输入的前缀下可能有很多可提示的查询词,如何对这些查询词进行排序,将用户选择概率更高的词放在前面?

简单的文本框输入自动提示

简单的文本框输入自动提示--输入的时候可以直接异步加载数据库中匹配的项,然后显示出来. 这里没有使用到数据库,直接在PHP用数组模拟数据存储.  demo演示 原理主要是: 监听输入框的状态,当有改变的时候即刻通过ajax发送数据并取得返回值. 主要使用了jQuery封装很方便,但貌似我这个兼容性不咋地...主要提供个思路吧~ js部分: <script type="text/javascript" src="./js/jquery.min.js">&l

边输入边提示字数的文本 ()可直接引用)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

密码输入强度提示实例代码

密码输入强度提示实例代码:现在众多的网站的注册表单,在填写密码的时候能够实时的给出密码强度提示,这可以提醒用户当前输入的密码安全程度,算是非常人性化的一个举措,下面就通过一个实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

实现文本框输入内容提示代码实例

实现文本框输入内容提示代码实例:比较人性化的网站一般都是比较讲究细节的,比如文本框输入内容具有提示效果,在默认情况下,文本框有提示文本,当鼠标放入文本框输入文本的时候,提示文本会消失,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="ht

输入型提示语消失/点击型提示语消失

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

.NET在后置代码中输入JS提示语句(背景不会变白)

来源:http://niunan.iteye.com/blog/248256 Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('加入暂存架成功!');</script>"); 类似于AJAX的效果,页面不刷新!! .NET在后置代码中输入JS提示语句(背景不会变白)

jQuery 下拉框输入匹配提示选项

做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下: 图示 HTML代码 <div style="width: 540px;"> <label class="control-label sr-only" for="search_dchannel_repo"></label> <input class="for

(转)输入pipt提示:AttributeError: &#39;module&#39; object has no attribute &#39;HTTPSConnection&#39;

文章转自:http://write.blog.csdn.net/postedit/51725016 1.测试 [[email protected] ~]# python Python 2.7.8 (default, Jun 17 2016, 01:25:39) [GCC 4.4.7 20120313 (Red Hat 4.4.7-17)] on linux2Type "help", "copyright", "credits" or "