文本框输入内容智能提示效果

实现效果如图

大体思路:

1.监听文本框事件。这里是用的keyup事件。大家可以尝试用onchange事件。不过感觉keyup事件的效果要好一点。

2.根据输入内容通过ajax异步的方式去访问后台数据。

3.遍历返回数据将数据添加到显示区域。

4.在添加数据的同时给每一条数据加上一些效果,点击其中一条将数据填到文本框,并且提示内容消失。

5.后台数据应该拼接成json格式。我这里的格式是这样的[{"name":"张三","sex","男"},{"name":"李四","sex":"女"}]

上代码。这里就不贴出来后台代码了。

<!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 runat="server">
    <title>自动提示</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/ecmascript">
        function txtchange() {
            var nnmae = $("#intxt").val();
            $.ajax({
                type: "post",
                url: "ashx/AutoNote.ashx",
                data: { name: nnmae },
                dataType: "json",
                success: function (data) {
                    $("#tbcontent").html(""); //删除原有数据
                    if (data != "null") {
                        for (var i = 0; i < $(data).length; i++) {
                            $("#tbcontent").append(‘<div class="item" onclick="mousedown(this)">‘ + data[i].name + ‘</div>‘);
                        }
                        $("#tbcontent").slideDown();
                    }
                }
            });
        }
        //选择其中的提示内容
        function mousedown(object) {
            $("#intxt").val($(object).text());
            $("#tbcontent").fadeOut();
        }
        //文档框失去焦点,隐藏提示内容
        function lost() {
            $("#tbcontent").fadeOut();
        }
    </script>
    <style type="text/css">
        .item:hover
        {
            background-color: Gray;
            cursor:pointer;
        }
        .show
        {
            width: 200px;
            z-index: 10;
            display: block;
        }
        .hidden
        {
            width: 200px;
            z-index: 10;
            display: none;
            border:1px solid rgb(80,160,91);
            border-top:none;
        }
        table tr td
        {
            margin:none;
            padding:none;
            border:none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width: 210px; margin-left:auto; margin-right:auto">
        <table>
            <tr>
                <td>
                    <input type="text" style="width: 200px;" id="intxt" onkeyup="txtchange()" onblur="lost()"/>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="tbcontent" class="hidden">
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

时间: 2024-10-07 16:13:32

文本框输入内容智能提示效果的相关文章

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

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

Selenium向iframe富文本框输入内容

目录 前言 只输入纯文本 通过JS注入HTML代码 前言 在使用Selenium测试一些CMS后台系统时,有时会遇到一些富文本框,如下图所示: 整个富文本编辑器是通过iframe嵌入到网页中的,手动尝试输入内容,发现内容是输入到iframe页面的body中的, 这种富文本框怎么输入呢? 我们也可以直接在body的源码上点击右键选择Edit HTML,输入相应的html代码,达到向富文本框输入的目的,如下下图: 以下是使用Selenium的操作方法 只输入纯文本 如果只输入不带格式的纯文本,可以先

关于MFC文本框输入内容的获取 与 设置文本框的内容

八月要开始做界面了<( ̄︶ ̄)/,然而目前只会用MFC╮(╯▽╰)╭ 好吧,言归正传,设置好文本框后,要获取用户输入的内容,可以用: GetDlgItemText() ; 这个函数有两个参数,第一个参数为文本框的ID号,比如IDC_EDIT3,然后用第二个参数存储其内容; 要想设置某文本框的内容,可以用: SetDlgItemText(); 参数类比之前的获取函数:

Java+Selenium向文本框输入内容以后模仿键盘的&quot;ENTRY&quot;

在自动化测试中我们避免不了要模仿一些键盘上按钮的操作,普通的字母,数字,特殊符号,这些都是很简单的,有时候我们也会模仿"SHIFT","ALT","CONTROL",这些Selenium已经提供了Action了,具体如下: Actions actions = new Actions(driver); actions.keyDown(Keys.CONTROL);//按下,松开control actions.keyDown(Keys.CONTROL)

js各种验证文本框输入内容格式

输入框不能为空 <input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"> 只能输入英文和数字<input onblur="if(/[^0-9a-zA-Z]/g.test(value))alert('有错')"><input onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"/>

验证文本框输入内容类型是汉字

JS代码如下: 1 <script type="text/javascript"> 2 function check() { 3 if (isChina(document.getElementById("Text_Value").value)) { 4 alert("輸入正確"); 5 //do something 6 } 7 else { 8 alert("輸入不正確"); 9 return false; 10

文本框输入内容立即触发事件

1.当输入内容时,立即触发某事件,宜用onkeyup,onchange会有延时. 2.jsp页面中常用的触发方法有: onchange .onkeyup .onblur 3.js中一般去掉on,例如 //自动检索 $("#resetSearch").keyup(function(){ var name = $("#resetSearch").val(); $("#projectListPanel").load(url,function(){ re

利用正则表达式限制网页表单里的文本框输入内容

将以下代码放入输入框就可以了. (1)用正则表达式限制只能输入中文:onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" (2)用正则表达式限制只能输入全角字符: onkeyup="valu

jquery正则表达式显示文本框输入范围 只能输入数字、小数、汉字、英文字母的方法

正则表达式限制文本框只能输入数字 许多时候我们在制作表单时需要限制文本框输入内容的类型,下面我们用正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等各类代码.1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">2.只能输入数字,能输