输入框提示自动提示类似百度,淘宝的输入框
输入框提示自动提示类似百度,淘宝的输入框
书中迷梦 发表于3年前
输入框提示自动提示类似百度,淘宝的输入框
  • 发表于 3年前
  • 阅读 666
  • 收藏 18
  • 点赞 0
  • 评论 2

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: jquery autoComplete插件

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>


标签: jquery autoComplete
共有 人打赏支持
粉丝 3
博文 23
码字总数 5597
评论 (2)
子弹兄
无图无真相啊
书中迷梦

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

无图无真相啊
不知道怎么把效果图放上去!所以就没有贴效果图!如果有问题 可以找我!!不好意思!
×
书中迷梦
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: