0

我正在使用 jQuery UI 构建一个自动完成的电子邮件字段。
表格工作正常，但我有两个问题：

第一个

电子邮件不断彼此相邻添加，并在包含之外构建，div如下所示：

屏幕视图

代码 

<style type="text/css">

    #emailDiv
    {
        width: 300px;
        padding: 3px 3px 0;
        margin: 0 auto;
        border: 1px solid #aaa;
        background-color: #fff;
        cursor: text;
        position: absolute;
        float: left;
    }
    #email
    {
        border : none
    }
    #emailDiv span
    { 
       border:solid 1px black

        }

</style>
<script type="text/javascript">
    $(function() {
        $("#emailDiv").click(function() { $("#email").focus(); })
        $("#email").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "AutoComplete.asmx/GetEmails",
                    data: "{ 'mail': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
                        response($.map(data.d, function(item) {
                            return {
                                value: item.Emails
                            }
                        }))
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            select: function(e, ui) {
                var list = ui.item.value;
                var span = $("<span>").text(list);
                span.insertBefore("#email");


            },

            change: function() {
                $("#email").val("");


            }
        });
    });

</script>
</head>
 <body>
<form id="form1" runat="server">
<div>
<label>Email: </label>
<div id="emailDiv">
    <input type="text" id="email" />   
</div>
</div>
</form>
</body>
 </html>

第二个

更改后我无法将电子邮件文本字段设置为空我必须单击外部某处emailDiv使其为空。

4

1 回答 1

1

如果我确实理解您的问题更正：

对于你的第一个问题

这取决于您的文档类型和剩余的全局 CSS 重置声明，但通过此示例，它解决了您的问题：

请参阅这个工作小提琴示例！

CSS

#emailDiv {
    width: 300px;
    padding: 3px 3px 0;
    margin: 0 auto;
    border: 1px solid #aaa;
    background-color: #fff;
    cursor: text;
    position: absolute;
    float: left;
}
#email {
    border: 0 none;
}
#emailDiv span {
    border: 1px solid black;
    float: left;
    padding: 2px;
    margin: 2px;
}
.clear {
    clear:both!important;
}

模拟 HTML

<form id="form1" runat="server">
    <div>
        <label>Email: </label>
        <div id="emailDiv" class="clear">
            <span>soneone@something.com</span>
            <span>soneone@thing.com</span>
            <span>soneone@ss.com</span>
            <span>soneone@aa.com</span>
            <span>soneone@dd.com</span>
            <input type="text" id="email" />   
        </div>
    </div>
</form>

到你的第二个问题

Add $(this).val(''); return false; to the end of your select function, this will prevent the value from being updated.

See this Working Fiddle Example!

$(function() {
  $("#emailDiv").click(function() {
    $("#email").focus();
  });

  $("#email").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "AutoComplete.asmx/GetEmails",
        data: "{ 'mail': '" + request.term + "' }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataFilter: function(data) { return data; },
        success: function(data) {
          response($.map(data.d, function(item) {
            return {
              value: item.Emails
            }
          }));
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }
      });
    },
    select: function(e, ui) {
      var list = ui.item.value;
      var span = $("<span>").text(list);
      span.insertBefore("#email");

      // clear the input
      $(this).val(''); return false;
    }
  });
});

It seems that on the source code, they check for false!

于 2012-05-29T17:07:33.660 回答