0

jQuery UI を使用してオートコンプリート メール フィールドを作成しています。
フォームは正常に機能しますが、2 つの問題があります。

最初の1つ

電子メールは互いに隣り合って追加され続け、次のように内容の外側に構築され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>

2つ目

変更後にメール テキスト フィールドを空に設定できません。空にするには、フィールドの外のどこかをクリック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>

あなたの第二号へ

選択関数の最後に追加$(this).val(''); return false;すると、値が更新されなくなります。

この実用的なフィドルの例を参照してください!

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

ソース コードでは、false をチェックしているようです。

于 2012-05-29T17:07:33.660 に答える