Question

我正在使用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之外的某处单击以使其为空。

Answer 1

如果我确实理解你的问题是正确的：

解决您的第一个问题

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

请参阅此working Fiddle示例！

<强> 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>

至第二期

将$(this).val(''); return false;添加到select函数的末尾，这样可以防止更新该值。

请参阅此Working Fiddle示例！

$(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;
    }
  });
});

似乎在源代码中，他们检查错误！

自动填充电子邮件范围无效

1 个答案: