文档章节

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

书中迷梦
 书中迷梦
发布于 2015/04/03 20:26
字数 199
阅读 710
收藏 18

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>


© 著作权归作者所有

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

评论(2)

书中迷梦
书中迷梦

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

无图无真相啊
不知道怎么把效果图放上去!所以就没有贴效果图!如果有问题 可以找我!!不好意思!
子弹兄
子弹兄
无图无真相啊
android学习笔记26--------------AutoCompleteTextView 与 MultiAutoCompleteTextView

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

晨曦之光
2012/03/15
0
0
请教红薯,为什么onkeypress事件输入中文时不触发事件

New Document

白发膜女
2010/10/08
2.7K
15
DataList:HTML5中的input输入框自动提示利器

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

ZhangLG
05/26
0
0
jQuery+PHP打造网页搜索框功能

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

crossmix
2015/09/18
112
0
Android 自动提示框-----AutoCompleteTextView的应用

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

鉴客
2011/09/18
4.8K
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux环境搭建 | VMware下共享文件夹的实现

在进行程序开发的过程中,我们经常要在主机与虚拟机之间传递文件,比如说,源代码位于虚拟机,而在主机下阅读或修改源代码,这里就需要使用到 「共享文件」 这个机制了。本文介绍了两种共享文...

良许Linux
58分钟前
4
0
JUC锁框架——AQS源码分析

JUC锁介绍 Java的并发框架JUC(java.util.concurrent)中锁是最重要的一个工具。因为锁,才能实现正确的并发访问。而AbstractQueuedSynchronizer(AQS)是一个用来构建锁和同步器的框架,使用A...

长头发-dawn
今天
1
0
docker中安装了RabbitMQ后无法访问其Web管理页面

在官网找了"$ docker run -d --hostname my-rabbit --name some-rabbit -p 8080:15672 rabbitmq:3-management"这条安装命令,在docker上安装了RabbitMQ,,结果输入http://localhost:8080并不......

钟然千落
今天
4
1
spring-cloud | 分布式session共享

写在前面的话 各位小伙伴,你们有福了,这一节不仅教大家怎么实现分布式session的问题,还用kotlin开发,喜欢kotlin的小伙伴是不是很开心! 以前在写Android的时候,就对客户端请求有一定的认...

冯文议
今天
3
0
c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部