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

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>
时间: 2024-08-03 10:54:51

输入框提示自动提示类似百度,淘宝的输入框的相关文章

jQuery实现TEXT文本框输入时的提示信息(谷歌百度淘宝搜索框提示实现)

在搜索框中,输入之前框内有输入的提示信息,文本框获得焦点后会自动消失的效果,效果图如下: 鼠标放在文本框时的效果: 创建工具类(已经存在就不用创建了)Util.js(DWR的JS) 在里面添加如下方法: Js代码 /** * Input框里的灰色提示,使用前先引入jquery * <br>使用方法:<input type="text" tipMsg="您的用户名"   /> * * @return */ function inputTipTe

Eclipse/myEclipse 代码提示/自动提示/自动完成设置(转)

一.设置超级自动提示 设置eclipse/myEclipse代码提示可以方便开发者,不用在记住拉杂的单词,只用打出首字母,就会出现提示菜单.如同dreamweaver一样方便. 1.菜单window->Preferences->Java->Editor->Content Assist-右边-auto-activaction栏下-Enable auto activation 选项要打上勾 2.Auto Activation triggers for java 后面 直接写入(新版ec

Eclipse/myEclipse 代码提示/自动提示/自动完成设置

一.设置超级自动提示 设置eclipse/myEclipse代码提示可以方便开发者,不用在记住拉杂的单词,只用打出首字母,就会出现提示菜单.如同dreamweaver一样方便. 1.菜单window->Preferences->Java->Editor->Content Assist-右边-auto-activaction栏下-Enable auto activation 选项要打上勾 2.Auto Activation triggers for java 后面 直接写入(新版ec

百度-淘宝-360搜索引擎搜索API

百度(baidu) Api地址:http://suggestion.baidu.com/su?wd=设计&p=3&cb=window.bdsug.sug window.bdsug.sug({q:"设计",p:false,s:["设计之家","设计素材下载","设计签名","设计在线","设计师","设计英才网","设计软件",&qu

输入框的自动提示功能

当我们用搜索的时候,在输入框输入一两个字后,就会自动提示信息,接下来我们用AutoCompleteTextView这个类与ArrayAdapter配合使用. 将要提示的信息保存到数组中,利用setAdapter添加适配器. AutoCompleteTextViewExample.java代码如下: 1 package com.example.lenovo.a1106; 2 3 import android.app.Activity; 4 import android.os.Bundle; 5 i

autocomplete 自动填充 类似百度查找

目录(?)[-] autocomplete有两种 一种 是 jquery ui里的 autocomplete httpjqueryuicomautocomplete 另一种是 ASPNET AJAX Control Toolkit  httpwwwajaxtoolkitnet 这个好像是只支持 webservice autocomplete autocomplete有两种 一种 是 jquery ui里的 autocomplete http://jqueryui.com/autocomplete

asp.net 输入框在chrome中无法关闭自动提示

将asp:TextBox 的属性AutoCompleteType设为Disabled,希望在chrome中点击记住用户名密码后输入框不再自动提示,但不起作用. 解决方法: <asp:TextBox ID="TeamName" runat="server" TextMode="SingleLine" AutoCompleteType="Disabled" ReadOnly="true"></

Android之仿京东淘宝的自动无限轮播控件

在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于RelativeLayout,首先要考虑的就是自定义的控件需要扩展那些属性,把这些属性列出来.在这里是要实现类似于京东淘宝的无限轮播广告栏,那马首先想到的就是轮播的时长.轮播指示器的样式等等.我在这里列举了一些并且结合到了代码中. 1.扩展属性 (1)是否开启自动轮播的功能. (2)指示器的图形样式,一

浏览器插件-自动登录淘宝(二)

前言 关于案例 下一章 版本更新提示案例 一.前言 上章我们提到过开发一个插件所需要的步骤: 浏览器插件-自动登录淘宝(-) 并且还介绍了如何在页面上面注入脚本代码,并且成功的完成用户名和密码的自动输入功能. 本章将会以一些案例来介绍插件的一些新的开发技巧.案例将包括: 关于案例 涉及的技术点包括: 如何使用popup.html popup如何使用js 如何使用chrome  api 二.关于案例 任何一个成熟的产品都会有关于的标志,这是在法律的角度上面宣示自己拥有这个产品的所有权. 以下案例将