文档章节

输入框提示自动提示类似百度,淘宝的输入框

书中迷梦
 书中迷梦
发布于 2015/04/03 20:26
字数 199
阅读 705
收藏 18
点赞 0
评论 2

1.需要的js和样式(jquery 是必选的)

  

<script src="${ctx}/js/jquery/jquery-1.7.2.js" type="text/javascript"></script>
<script src="${ctx}/js/jquery/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
    <script src="${ctx}/js/jquery/jquery.ui.core.js" type="text/javascript"></script>
    <script src="${ctx}/js/jquery/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="${ctx}/js/jquery/jquery.ui.position.js" type="text/javascript"></script>
    <script src="${ctx}/js/jquery/jquery.ui.autocomplete.js" type="text/javascript"></script>
    <link href="${ctx}/js/jquery/css/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" />

2. js

    $("#pName").autocomplete({
                source: function(request, response ) {
                    $.ajax({
                        url: "${ctx}/xxxx/xxxxx.do",
                        dataType: "json",
                        data:{
                            name: request.term
                        },
                        success: function(data) {
                            response($.map(eval(data), function(item) {
                                return {
                                    uid:item.id,
                                    value:item.person.name+"-"+item.person.mobile
                                }
                            }));
                        }
                    });
                },
                minLength:1,
                select:function(event,ui) {
                    $("#pid").val(ui.item.uid);
                    $("#pName").val(ui.item.value);
                }
            });

3.jsp元素

<tr>
                <td><input type="text" id="pName" value=""/></td>
                <td><input type="hidden" id="pid"></td>
                <td><input type="button"  id="submitProjectPerson" value="添加成员"/></td>
                <td><span id="flagError" style="color:red"></span></td>
            </tr>


© 著作权归作者所有

共有 人打赏支持
书中迷梦
粉丝 2
博文 24
码字总数 6116
作品 0
徐汇
程序员
加载中

评论(2)

书中迷梦
书中迷梦

引用来自“子弹兄”的评论

无图无真相啊
不知道怎么把效果图放上去!所以就没有贴效果图!如果有问题 可以找我!!不好意思!
子弹兄
子弹兄
无图无真相啊
请教红薯,为什么onkeypress事件输入中文时不触发事件

New Document

白发膜女 ⋅ 2010/10/08 ⋅ 15

android学习笔记26--------------AutoCompleteTextView 与 MultiAutoCompleteTextView

1、简介 在我们平常上网的时候经常会用到谷歌或百度,在输入框中输入我们想要输入的信息就会出现其他与其相关的提示信息,非常方便。这种效果在Android中是用AutoCompleteTextView实现的Aut...

晨曦之光 ⋅ 2012/03/15 ⋅ 0

DataList:HTML5中的input输入框自动提示利器

DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果。它是HTM...

ZhangLG ⋅ 05/26 ⋅ 0

jQuery+PHP打造网页搜索框功能

例如在百度上有个很使用的功能,就是用户在搜索的时候会自动提示相关搜索条件以供选择,非常人性化的设计,我们如何将此功能放到自己的项目中呢,经过一番研究,终于实现了此功能,分享给eve...

crossmix ⋅ 2015/09/18 ⋅ 0

Android 自动提示框-----AutoCompleteTextView的应用

现在我们上网几乎都会用百度或者谷歌搜索信息,当我们在输入框里输入一两个字后,就会自动提示我们想要的信息,这种效果在Android 里是如何实现的呢? 事实上,Android 的AutoCompleteTextView Wi...

鉴客 ⋅ 2011/09/18 ⋅ 0

Android学习笔记(五)

DatePicker和DatePickerDialog的用法    DatePicker是用于选择日期的控件,和TimePicker类似,一般在设置系统日期和时间的时候可以看到。 DatePicker和以前的控件的一个很大的区别在于,这...

摆渡者 ⋅ 2014/03/03 ⋅ 0

10 个基于jQuery的表单增强脚本和插件

以下10个基于jQuery的脚本和插件可以有效地提高表单的可访问性和功能性,本文中的一些源码和演示也许能帮助你优化当前的表单,使访问者获得良好的用户体验。 1. Form Hints 1.0 使用这个插件...

小编辑 ⋅ 2011/12/16 ⋅ 0

基于jquery实现的类似百度搜索的输入框自动完成功能

自动完成功能是指:类似百度搜索之类的输入一个词的一部分后就自动提示,然后用户可以选择,不需要再输入剩余部分。废话不多说,直观的看一下:   实现这个功能需要服务端配合。客户端通过...

凯文加内特 ⋅ 2014/06/25 ⋅ 3

android studio 如何设置代码提示

图上内容比较多,我直接按区域划分成6块区域来说吧: 区域1:这个选项是关于提示的时候如何进行匹配,即按照什么条件来进行提示内容的搜索。 All:选择这个的话,意思就是要和你输入的字符进行...

张裕轩 ⋅ 2017/04/25 ⋅ 0

IOS,UITextField比较全的实用的属性功能

//初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)]; //设置边框样式,只有设置了才会显示边框样式 text.borderStyle...

曹江涛 ⋅ 2016/01/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 58分钟前 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部